# GroupList 分组列表

FPI

该组件为高性能分组列表组件

# 平台差异说明

App	H5	微信小程序	支付宝小程序	百度小程序	头条小程序	QQ小程序
√	√	√	√	√	√	√

# 基本使用

• 配合组件u-list-item嵌套使用
• 参数show-scrollbar是否出现滚动条仅在nvue中有效
• 事件@scrolltolower滚动到底部触发事件

<template>
	<view class="u-page">
		<u-list @scrolltolower="scrolltolower">
				<u-list-item
					:data="list"
					:theme="theme"
					:arrow="arrow"
					titleName="title"
					:show-title="showTitle"
					@click="clickItem"
				></u-list-item>
        </u-list>
	</view>
</template>

<script>
	export default {
		data() {
			return {
                theme: "normal",
                arrow: true,
                showTitle: true,
                indexList: [],
                list: [
                    {
                        title: "444",
                        children: [
                            { label: "张三"}, { label: "李四"}, { label: "王五"}, { label: "马六"}, { label: "田七"}
                        ]
                    },
                    {
                        title: "分组1",
                        children: [
                            { label: "张三"}, { label: "李四"}, { label: "王五"}, { label: "马六"}, { label: "田七"}
                        ]
                    }
                ]
			}
		},
		onLoad() {
			this.loadmore()
		},
		methods: {
			scrolltolower() {
				this.loadmore()
			},
			loadmore() {
				for (let i = 0; i < 5; i++) {
                    this.list.push({
                        title: "分组" + uni.$u.random(0, 100),
                        children: [{label: "张三" + uni.$u.random(0, 100)}, {label: "李四" + uni.$u.random(0, 100)}]
                    });
			    }
			},
            clickItem(item) {
                uni.showToast({
                    title: "点击了--" + item.label,
                    icon: "none",
                    mask: true
                });
		    },
		},
	}
</script>

# API

# List Props

参数	说明	类型	默认值	可选值
showScrollbar	控制是否出现滚动条，仅nvue有效	Boolean	false	true
lowerThreshold	距底部多少时触发scrolltolower事件	String | Number	50	-
upperThreshold	距顶部多少时触发scrolltoupper事件，非nvue有效	String | Number	0	-
scrollTop	设置竖向滚动条位置	String	Number	0
offsetAccuracy	控制 onscroll 事件触发的频率，仅nvue有效	String | Number	10	-
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

重点

参数	说明	类型	默认值	可选值
theme FPI	主题模式，普通模式normal，关怀模式care	String	normal	care
anchor	用于滚动到指定item	String | Number	-	-
data	列表数据	Array	-	-
arrow	是否显示右侧箭头,开启的话，将会默认带上点击反馈，可通过hover-class配置	Boolean	true	-
hover-class	是否开启点击反馈，none为无效果，见上方说明	String	u-cell-hover	-
title-style	标题样式，对象形式	Object	-	-
label-style	信息标题的样式，对象形式	Object	-	-
bg-color	背景颜色，默认透明背景	String	transparent	-
title-name	自定义data数据的title属性名	String	title	-
label-name	自定义data数据的label属性名	String	label	-
child-name	自定义data数据的children属性名	String	children	-