uview-ultra v4

Appearance

List 列表 ​

该组件为高性能列表组件

平台差异说明 ​

App（vue）App（nvue）H5小程序
√√√√

基本使用 ​

  • 配合组件up-list-item嵌套使用
  • 参数show-scrollbar是否出现滚动条仅在nvue中有效
  • 事件@scrolltolower滚动到底部触发事件
html
<template>
	<view class="u-page">
		<up-list
			@scrolltolower="scrolltolower"
		>
			<up-list-item
				v-for="(item, index) in indexList"
				:key="index"
			>
				<up-cell
					:title="`列表长度-${index + 1}`"
				>
					<template #icon>
						<up-avatar
							shape="square"
							size="35"
							:src="item.url"
							customStyle="margin: -3px 5px -3px 0"
						></up-avatar>
					</template>
				</up-cell>
			</up-list-item>
		</up-list>
	</view>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';  

const indexList = reactive([]);
const urls = [
  'https://uview-ultra.jiangruyi.com/album/1.jpg',
  'https://uview-ultra.jiangruyi.com/album/2.jpg',
  'https://uview-ultra.jiangruyi.com/album/3.jpg',
  'https://uview-ultra.jiangruyi.com/album/4.jpg',
  'https://uview-ultra.jiangruyi.com/album/5.jpg',
  'https://uview-ultra.jiangruyi.com/album/6.jpg',
  'https://uview-ultra.jiangruyi.com/album/7.jpg',
  'https://uview-ultra.jiangruyi.com/album/8.jpg',
  'https://uview-ultra.jiangruyi.com/album/9.jpg',
  'https://uview-ultra.jiangruyi.com/album/10.jpg',
];

onLoad(() => {
  loadmore();
});

const scrolltolower = () => {
  loadmore();
};

const loadmore = () => {
  for (let i = 0; i < 30; i++) {
    indexList.value.push({
      url: urls[uni.$u.random(0, urls.length - 1)],
    });
  }
};
</script>
html
<template>
	<view class="u-page">
		<up-list
			@scrolltolower="scrolltolower"
		>
			<up-list-item
				v-for="(item, index) in indexList"
				:key="index"
			>
				<up-cell
					:title="`列表长度-${index + 1}`"
				>
					<template #icon>
						<up-avatar
							shape="square"
							size="35"
							:src="item.url"
							customStyle="margin: -3px 5px -3px 0"
						></up-avatar>
					</template>
				</up-cell>
			</up-list-item>
		</up-list>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				indexList: [],
				urls: [
					'https://uview-ultra.jiangruyi.com/album/1.jpg',
					'https://uview-ultra.jiangruyi.com/album/2.jpg',
					'https://uview-ultra.jiangruyi.com/album/3.jpg',
					'https://uview-ultra.jiangruyi.com/album/4.jpg',
					'https://uview-ultra.jiangruyi.com/album/5.jpg',
					'https://uview-ultra.jiangruyi.com/album/6.jpg',
					'https://uview-ultra.jiangruyi.com/album/7.jpg',
					'https://uview-ultra.jiangruyi.com/album/8.jpg',
					'https://uview-ultra.jiangruyi.com/album/9.jpg',
					'https://uview-ultra.jiangruyi.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有效Booleanfalsetrue
lowerThreshold距底部多少时触发scrolltolower事件String | Number50-
upperThreshold距顶部多少时触发scrolltoupper事件，非nvue有效String | Number0-
scrollTop设置竖向滚动条位置String | Number0-
offsetAccuracy控制 onscroll 事件触发的频率，仅nvue有效String | Number10-
enableFlex启用 flexbox 布局。开启后，当前节点声明了display: flex就会成为flex container，并作用于其孩子节点，仅微信小程序有效Booleanfalse-
pagingEnabled是否按分页模式显示List，默认值falseBooleanfalse-
scrollable是否允许List滚动Booleantrue-
scrollIntoView值应为某子元素id（id不能以数字开头）String--
scrollWithAnimation在设置滚动条位置时使用动画过渡Booleanfalse-
enableBackToTopiOS点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只对微信小程序有效Booleanfalse-
height列表的高度String | Number0-
width列表宽度String | Number0-
preLoadScreen列表前后预渲染的屏数，1代表一个屏幕的高度，1.5代表1个半屏幕高度String | Number1-

List Events ​

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

ListItem Props ​

参数说明类型默认值可选值
anchor用于滚动到指定itemString | Number--