当前位置：首页 > VUE

weex vue 实现列表

2026-01-17 06:46:44VUE

weex + Vue 实现列表的方法

使用<list>和<cell>组件
在weex中，列表通常通过<list>和<cell>组件实现。<list>为滚动容器，<cell>用于渲染每一项内容。需确保<list>设置固定高度或填充父容器。

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

<script>
export default {
  data() {
    return {
      items: Array(20).fill().map((_, i) => ({ text: `Item ${i}` })),
      viewportHeight: '800px' // 根据实际需求调整
    }
  }
}
</script>

优化长列表性能
对于大数据量，建议使用<recycle-list>替代<list>。<recycle-list>通过复用节点减少内存消耗，需配合switch和alias属性定义模板。

<template>
  <recycle-list :data="items" alias="item">
    <cell-slot>
      <div class="item">{{ item.text }}</div>
    </cell-slot>
  </recycle-list>
</template>

添加下拉刷新和上拉加载
通过<list>的refresh和loadmore事件实现交互功能。需手动调用refreshEnd或loadmoreEnd结束状态。

<list 
  @refresh="onRefresh" 
  @loadmore="onLoadMore" 
  :showRefresh="true">
  <!-- cell内容 -->
</list>

<script>
methods: {
  onRefresh() {
    setTimeout(() => {
      this.$refs.list.refreshEnd();
    }, 1000);
  },
  onLoadMore() {
    setTimeout(() => {
      this.items.push(...newData);
      this.$refs.list.loadmoreEnd();
    }, 1000);
  }
}
</script>

样式和交互增强
为<cell>添加点击事件或自定义样式，提升用户体验。注意weex的样式限制，部分CSS属性可能不支持。

<cell 
  v-for="item in items" 
  @click="handleClick(item)"
  :class="{ 'active': item.selected }">
  <text class="item-text">{{ item.text }}</text>
</cell>

<style>
.item-text {
  font-size: 32px;
  color: #333;
}
.active {
  background-color: #f0f0f0;
}
</style>

注意事项