uniapp 内容列表

uniapp 内容列表的实现方法

uniapp 中实现内容列表通常使用 scroll-view 或 list 组件，结合数据绑定和样式调整来展示内容。

使用 scroll-view 实现基础列表

<scroll-view scroll-y="true" style="height: 100vh;">
  <view v-for="(item, index) in listData" :key="index" class="list-item">
    {{ item.title }}
  </view>
</scroll-view>

数据绑定与样式示例

export default {
  data() {
    return {
      listData: [
        { title: '项目1' },
        { title: '项目2' }
      ]
    }
  }
}

.list-item {
  padding: 20rpx;
  border-bottom: 1rpx solid #eee;
}

实现下拉刷新和上拉加载

uniapp 提供 onPullDownRefresh 和 onReachBottom 生命周期函数实现刷新和加载功能。

页面配置

{
  "enablePullDownRefresh": true,
  "onReachBottomDistance": 50
}

逻辑实现

export default {
  onPullDownRefresh() {
    // 刷新数据
    setTimeout(() => {
      uni.stopPullDownRefresh()
    }, 1000)
  },
  onReachBottom() {
    // 加载更多数据
  }
}

优化列表性能

对于长列表，建议使用 uni-list 组件或实现虚拟列表。

虚拟列表实现

<scroll-view 
  scroll-y 
  :scroll-top="scrollTop"
  @scroll="handleScroll">
  <view :style="{ height: totalHeight + 'px' }">
    <view 
      v-for="item in visibleData" 
      :key="item.id"
      :style="{ transform: `translateY(${item.offset}px)` }">
      {{ item.content }}
    </view>
  </view>
</scroll-view>

列表项点击事件处理

为列表项添加点击事件和动画效果提升用户体验。

点击事件示例

<view 
  v-for="item in listData" 
  :key="item.id"
  @click="handleItemClick(item)"
  :class="['list-item', { 'active': activeId === item.id }]">
  {{ item.title }}
</view>

动画效果实现

.list-item {
  transition: all 0.3s;
}
.list-item.active {
  background-color: #f5f5f5;
}

列表数据过滤与搜索

实现搜索功能可以结合计算属性和过滤器。

搜索功能实现

computed: {
  filteredList() {
    return this.listData.filter(item => 
      item.title.includes(this.searchText)
    )
  }
}

模板中使用

<input v-model="searchText" placeholder="搜索..." />
<view v-for="item in filteredList" :key="item.id">
  {{ item.title }}
</view>