该组件为高性能列表组件
#平台差异说明
| App（vue） | App（nvue） | H5 | 小程序 |
| √ | √ | √ | √ |
#基本使用
- 配合组件
u-list-item嵌套使用 - 参数
show-scrollbar是否出现滚动条仅在nvue中有效 - 事件
@scrolltolower滚动到底部触发事件
<template> <view class="u-page"> <u-list @scrolltolower="scrolltolower" > <u-list-item v-for="(item, index) in indexList" :key="index" > <u-cell :title="`列表长度-${index + 1}`" > <u-avatar slot="icon" shape="square" size="35" :src="item.url" customStyle="margin: -3px 5px -3px 0" ></u-avatar> </u-cell> </u-list-item> </u-list> </view> </template> <script> export default { data() { return { indexList: [], urls: [ 'https://cdn.uviewui.com/uview/album/1.jpg', 'https://cdn.uviewui.com/uview/album/2.jpg', 'https://cdn.uviewui.com/uview/album/3.jpg', 'https://cdn.uviewui.com/uview/album/4.jpg', 'https://cdn.uviewui.com/uview/album/5.jpg', 'https://cdn.uviewui.com/uview/album/6.jpg', 'https://cdn.uviewui.com/uview/album/7.jpg', 'https://cdn.uviewui.com/uview/album/8.jpg', 'https://cdn.uviewui.com/uview/album/9.jpg', 'https://cdn.uviewui.com/uview/album/10.jpg', ] } }, onLoad() { this.loadmore() }, methods: { scrolltolower() { this.loadmore() }, loadmore() { for (let i = 0; i < 30; i++) { this.indexList.push({ url: this.urls[uni.$u.random(0, this.urls.length - 1)] }) } } }, } </script>
