List 列表

约 606 字大约 2 分钟

2025-10-31

该组件为高性能列表组件

平台差异说明

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">
        <un-cell :title="`列表长度-${index + 1}`">
          <u-avatar
            slot="icon"
            shape="square"
            size="35"
            :src="item.url"
            customStyle="margin: -3px 5px -3px 0"
          ></u-avatar>
        </un-cell>
      </u-list-item>
    </u-list>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        indexList: [],
        urls: [
          "https://uviewui.com/album/1.jpg",
          "https://uviewui.com/album/2.jpg",
          "https://uviewui.com/album/3.jpg",
          "https://uviewui.com/album/4.jpg",
          "https://uviewui.com/album/5.jpg",
          "https://uviewui.com/album/6.jpg",
          "https://uviewui.com/album/7.jpg",
          "https://uviewui.com/album/8.jpg",
          "https://uviewui.com/album/9.jpg",
          "https://uviewui.com/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>

此页面源代码地址

页面源码地址

github

gitee

API

List Props

参数	说明	类型	默认值
showScrollbar	控制是否出现滚动条，仅 nvue 有效	boolean	false
lowerThreshold	距底部多少时触发 scrolltolower 事件	string \| number	50
upperThreshold	距顶部多少时触发 scrolltoupper 事件，非 nvue 有效	string \| number	0
scrollTop	设置竖向滚动条位置	string \| number	0
offsetAccuracy	控制 onscroll 事件触发的频率，仅 nvue 有效	string \| number	10
enableFlex	启用 flexbox 布局。开启后，当前节点声明了 display: flex 就会成为 flex container，并作用于其孩子节点，仅微信小程序有效	boolean	false
pagingEnabled	是否按分页模式显示 List，默认值 false	boolean	false
scrollable	是否允许 List 滚动	boolean	true
scrollIntoView	值应为某子元素 id（id 不能以数字开头）	string	-
scrollWithAnimation	在设置滚动条位置时使用动画过渡	boolean	false
enableBackToTop	iOS 点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只对微信小程序有效	boolean	false
height	列表的高度	string \| number	0
width	列表宽度	string \| number	0
preLoadScreen	列表前后预渲染的屏数，1 代表一个屏幕的高度，1.5 代表 1 个半屏幕高度	string \| number	1

List Events

事件名	说明	回调参数
scroll	滚动条滚动触发事件	scrollTop: 滚动条位置
scrolltolower	滚动到底部触发事件	-

ListItem Props

参数	说明	类型	默认值
anchor	用于滚动到指定 item	string \| number	-