当前位置：首页 > VUE

weex vue 实现列表

2026-03-09 11:54:09VUE

Weex 与 Vue 实现列表的方法

使用 `list` 组件

Weex 提供了原生 list 组件用于高性能列表渲染，结合 Vue 的 v-for 指令可以动态生成列表项。示例代码如下：

weex vue 实现列表

<template>
  <list class="list">
    <cell v-for="(item, index) in items" :key="index" class="cell">
      <text class="text">{{ item.name }}</text>
    </cell>
  </list>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { name: 'Item 1' },
        { name: 'Item 2' },
        { name: 'Item 3' }
      ]
    }
  }
}
</script>

<style scoped>
.list {
  width: 750px;
  background-color: #f5f5f5;
}
.cell {
  padding: 20px;
  border-bottom-width: 1px;
  border-bottom-color: #ddd;
}
.text {
  font-size: 32px;
}
</style>

下拉刷新与上拉加载

通过 refresh 和 loading 事件实现列表的交互功能。需要为 list 组件添加 ref 属性并调用对应方法：

weex vue 实现列表

<template>
  <list 
    ref="list"
    @refresh="onRefresh" 
    @loadmore="onLoadMore"
  >
    <!-- 列表内容 -->
  </list>
</template>

<script>
export default {
  methods: {
    onRefresh() {
      setTimeout(() => {
        this.$refs.list.refreshEnd()
      }, 1000)
    },
    onLoadMore() {
      setTimeout(() => {
        this.items.push(/* 新数据 */)
        this.$refs.list.loadmoreEnd()
      }, 1000)
    }
  }
}
</script>

优化列表性能

对于长列表，建议使用 recycle-list 组件以复用 DOM 节点。需要安装 weex-recycle-list 插件：

<template>
  <recycle-list 
    :data="items" 
    template-key="type"
  >
    <cell-slot template="item" v-for="item in items">
      <text>{{ item.name }}</text>
    </cell-slot>
  </recycle-list>
</template>