weex vue 实现列表

使用 Weex 和 Vue 实现列表

在 Weex 中结合 Vue 实现列表功能，主要通过 <list> 和 <cell> 组件完成。以下是具体实现方法：

基础列表实现

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

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

添加列表样式

为列表项添加样式，增强视觉效果：

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

<style scoped>
  .item {
    padding: 20px;
    border-bottom-width: 1px;
    border-bottom-color: #eee;
  }
  .item-text {
    font-size: 32px;
    color: #333;
  }
</style>

实现下拉刷新

集成下拉刷新功能，提升用户体验：

<template>
  <list ref="list" @refresh="onRefresh" :showRefresh="true">
    <cell v-for="(item, index) in items" :key="index">
      <text>{{ item.title }}</text>
    </cell>
  </list>
</template>

<script>
  export default {
    methods: {
      onRefresh() {
        setTimeout(() => {
          this.$refs.list.refreshEnd()
        }, 1000)
      }
    }
  }
</script>

实现上拉加载更多

添加加载更多功能，适用于长列表场景：

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

<script>
  export default {
    methods: {
      onLoadMore() {
        setTimeout(() => {
          this.items.push(...newItems)
          this.$refs.list.loadmoreEnd()
        }, 1000)
      }
    }
  }
</script>

复杂列表项布局

实现包含图片和文字的复杂列表项：

<template>
  <list>
    <cell v-for="(item, index) in items" :key="index" class="item">
      <image :src="item.image" class="thumb"></image>
      <div class="info">
        <text class="title">{{ item.title }}</text>
        <text class="desc">{{ item.description }}</text>
      </div>
    </cell>
  </list>
</template>

<style scoped>
  .item {
    flex-direction: row;
    padding: 20px;
  }
  .thumb {
    width: 120px;
    height: 120px;
    margin-right: 20px;
  }
  .info {
    flex: 1;
  }
  .title {
    font-size: 32px;
    color: #333;
  }
  .desc {
    font-size: 24px;
    color: #999;
  }
</style>

性能优化建议

对于长列表，采用以下优化策略：

• 避免在列表项中使用复杂的计算属性
• 为每个列表项设置唯一的key
• 合理使用图片懒加载
• 考虑分页加载数据

<template>
  <list>
    <cell v-for="item in items" :key="item.id">
      <text>{{ item.content }}</text>
    </cell>
  </list>
</template>

<script>
  export default {
    data() {
      return {
        items: [],
        page: 1,
        loading: false
      }
    },
    mounted() {
      this.loadData()
    },
    methods: {
      async loadData() {
        if (this.loading) return
        this.loading = true
        const newItems = await fetchData(this.page)
        this.items = [...this.items, ...newItems]
        this.page++
        this.loading = false
      }
    }
  }
</script>

通过以上方法，可以在 Weex 中高效实现各种列表功能，满足不同场景的需求。