官方手册

• 用于定义列表中的子列表项，类似于 HTML 中的ul之于li。Weex 会对<cell> 进行高效的内存回收以达到更好的性能，该组件必须作为<list>组件的子组件, 这是为了优化滚动时的性能。

样式

• 不能给 <cell>设定flex值。 <cell>的宽度等于父组件 <list> 的宽度，并且<cell> 高度自适应。

示例

<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 源码

• 组件类：WXCellComponent

[self registerComponent:@"cell" withClass:NSClassFromString(@"WXCellComponent")];

• 里面有个list，这个cell的使用者，所以cell专门用于list组件。里面的一些方法，也是调用list的相应方法而实现的。

@interface WXCellComponent : WXComponent
@property (nonatomic, strong) NSString *scope;
@property (nonatomic, weak) WXListComponent *list;
@end

• 比如从list中移除一个cell

- (void)_removeFromSupercomponent
{
    [super _removeFromSupercomponent]; 
    [self.list cellDidRemove:self];
}

• 从代码上看，cell更像是一个用于list组件的“中间过渡”组件，没有做具体的事情。把他当做一个容器好了。从本地代码角度看，只是一个view，一个容器。具体的内容，放一个<div>组件做容器包一下，就像示例代码中做的那样。