# List 列表

一般用于长列表显示场景。在 NVUE 中采用了原生的list长列表组件, VUE 中采用scroll-view滚动视图区域组件。

优点:

  • 多端兼容统一化(APP / H5 / 各端小程序)
  • 下拉刷新

注意

  • <n-list> 组件中只能使用 <n-cell> 子组件
  • 组件为一级组件,不能被 view 标签包裹

# 下拉刷新配置

开发者可全局配置下拉刷新,在 .dnvue/common/global.js 中进行配置,不配置则使用框架默认下拉刷新。

# 默认配置规范 按需配置

module.exports = {
	//下拉刷新
	refresh: {
		gif: 'https://dqc.gitee.io/dnvue-ui/imgs/sys/refresh.gif', //下拉刷新GIF图
		gifSize: [112, 112], //下拉刷新GIF图大小,[宽度,高度]
		text: ['下拉即可刷新~', '释放立即刷新~', '正在刷新~', '已刷新~'], //下拉刷新显示内容,['下拉刷新之前','触发达到下拉刷新机制','刷新中','已完成刷新']
		textColor: '$gray-7', //文本颜色
		textSize: '28' //文本字号
	}
}

# 基本使用

通过 <n-list> 形式调用,在组件中只能嵌套子组件 <n-cell>

<template>
	<n-list>
		<n-cell>
			<n-text text="哈喽,欢迎来到DNVUE" />
		</n-cell>
	</n-list>
</template>

# 开启下拉刷新

通过设置 is-refresh 参数为 true 。需在组件上添加 ref,用于关闭下拉刷新操作。

<template>
	<n-list is-refresh ref="refresh" @startrefresh="startRefresh">
		<n-cell>
			<n-text text="哈喽,欢迎来到DNVUE" />
		</n-cell>
	</n-list>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			//下拉刷新触发事件
			startRefresh(){
				//模拟关闭下拉刷新
				setTimeout(()=>{
					this.$refs.refresh.stoprefresh();
				},3000)
			}
		}
	}
</script>

<style>

</style>

# API

# Attribute 参数

参数 说明 类型 可选值 默认值 兼容平台
show-scrollbar 控制是否出现滚动条 Boolean true false
bounce 控制是否禁用回弹(禁用回弹后ios不能使用自定义下拉刷新) Boolean false true APP-NVUE
loadmoreoffset 距底部多远时(单位px),触发 loadmore 事件 String, Number - 50
is-refresh 控制是否开启自定义下拉刷新 Boolean true false

# Event 事件

事件名 说明 返回值
@network 监听当前网络状态事件 {network: 是否有网络,networkType: 当前网络类型}
@loadmore 触底事件 -
@startrefresh 触发下拉刷新事件 -
1.1.2 @scroll 滚动时触发,APP-NVUE不支持 滚动时触发,event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}