weex vue 实现列表

Weex 结合 Vue 实现列表的方法

使用 <list> 和 <cell> 组件
Weex 提供了原生列表组件 <list> 和 <cell>，用于高性能列表渲染。<list> 是滚动容器，<cell> 作为列表项模板。示例代码如下：

<template>
  <list :loadmoreoffset="10" @loadmore="loadMore">
    <cell v-for="(item, index) in items" :key="index">
      <div class="item">
        <text>{{ item.title }}</text>
      </div>
    </cell>
  </list>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { title: 'Item 1' },
        { title: 'Item 2' }
      ]
    }
  },
  methods: {
    loadMore() {
      // 加载更多数据逻辑
    }
  }
}
</script>

优化列表性能
为提升渲染效率，建议为 <cell> 设置 reuse="true" 启用复用机制，避免频繁创建和销毁组件。同时，使用 v-for 时务必指定 :key。

下拉刷新与上拉加载
通过 <refresh> 和 <loading> 子组件实现交互功能：

<template>
  <list>
    <refresh @refresh="onRefresh">
      <text>下拉刷新</text>
    </refresh>
    <cell v-for="item in items" :key="item.id">
      <!-- 内容 -->
    </cell>
    <loading @loading="onLoadMore">
      <text>加载更多</text>
    </loading>
  </list>
</template>

样式与布局
Weex 使用 Flexbox 布局，确保列表容器设置明确高度。例如：

.list {
  width: 750px;
  height: 1000px;
}
.item {
  padding: 20px;
  border-bottom: 1px solid #eee;
}

数据分页处理
通过接口分页加载数据时，维护 page 和 pageSize 变量，在 loadMore 方法中拼接新数据：

loadMore() {
  this.page++;
  fetchData(this.page).then(newItems => {
    this.items = [...this.items, ...newItems];
  });
}