官方手冊(cè)
- 用于定義列表中的子列表項(xiàng)携悯，類(lèi)似于 HTML 中的
ul之于li诸典。Weex 會(huì)對(duì)<cell> 進(jìn)行高效的內(nèi)存回收以達(dá)到更好的性能展运，該組件必須作為<list>組件的子組件, 這是為了優(yōu)化滾動(dòng)時(shí)的性能秘车。
樣式
- 不能給
<cell>設(shè)定flex值蜕依。 <cell>的寬度等于父組件 <list> 的寬度桅锄，并且<cell> 高度自適應(yīng)。
示例
<template>
<list class="list" @loadmore="fetch" loadmoreoffset="10">
<cell class="cell" v-for="num in lists">
<div class="panel">
<text class="text">{{num}}</text>
</div>
</cell>
</list>
</template>
<script>
const modal = weex.requireModule('modal')
const LOADMORE_COUNT = 4
export default {
data () {
return {
lists: [1, 2, 3, 4, 5]
}
},
methods: {
fetch (event) {
modal.toast({ message: 'loadmore', duration: 1 })
setTimeout(() => {
const length = this.lists.length
for (let i = length; i < length + LOADMORE_COUNT; ++i) {
this.lists.push(i + 1)
}
}, 800)
}
}
}
</script>
<style scoped>
.panel {
width: 600px;
height: 250px;
margin-left: 75px;
margin-top: 35px;
margin-bottom: 35px;
flex-direction: column;
justify-content: center;
border-width: 2px;
border-style: solid;
border-color: rgb(162, 217, 192);
background-color: rgba(162, 217, 192, 0.2);
}
.text {
font-size: 50px;
text-align: center;
color: #41B883;
}
</style>
SDK 源碼
[self registerComponent:@"cell" withClass:NSClassFromString(@"WXCellComponent")];
- 里面有個(gè)
list样眠，這個(gè)cell的使用者，所以cell專(zhuān)門(mén)用于list組件翠肘。里面的一些方法檐束，也是調(diào)用list的相應(yīng)方法而實(shí)現(xiàn)的。
@interface WXCellComponent : WXComponent
@property (nonatomic, strong) NSString *scope;
@property (nonatomic, weak) WXListComponent *list;
@end
- (void)_removeFromSupercomponent
{
[super _removeFromSupercomponent];
[self.list cellDidRemove:self];
}
- 從代碼上看束倍，
cell更像是一個(gè)用于list組件的“中間過(guò)渡”組件被丧，沒(méi)有做具體的事情。把他當(dāng)做一個(gè)容器好了绪妹。從本地代碼角度看甥桂，只是一個(gè)view，一個(gè)容器邮旷。具體的內(nèi)容黄选，放一個(gè)<div>組件做容器包一下，就像示例代碼中做的那樣婶肩。
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
