概述
List是很常用的滚动类容器组件,包含有一系列相同宽度的列表项,List组件和子组件ListItem一起使用,List列表中的每一个列表项对应一个ListItem组件。
语法
List(value?: {space?:number|string,initialIndex?:number,scroller?:Scroller})
参数 | 说明 |
---|---|
space | 设置列表间距 |
initalIndex | 设置当前list初次加载时起始位置显示的item |
scroller | 设置控制List组件的滚动 |
属性
设置List排列方向
List().listDirection(Axis.Vertical)
参数 | 说明 |
---|---|
Vertical | 子组件ListItem在List容器组件中呈纵向排列 |
Horizontal | 子组件ListItem在List容器组件中呈横向排列。 |
设置列表分割线
List().divider(value: {
strokeWidth: Length;
color?: ResourceColor;
startMargin?: Length;
endMargin?: Length;
}
参数 | 说明 |
---|---|
strokeWidth | 分割线的线宽 |
color | 分割线的颜色。 |
startMargin | 分割线距离列表侧边起始端的距离。 |
endMargin | 分割线距离列表侧边结束端的距离。 |
List列表滚动事件监听
List组件提供了一系列事件方法用来监听列表的滚动,您可以根据需要,监听这些事件来做一些操作:
- onScroll:列表滑动时触发,返回值scrollOffset为滑动偏移量,scrollState为当前滑动状态。
- onScrollIndex:列表滑动时触发,返回值分别为滑动起始位置索引值与滑动结束位置索引值。
- onReachStart:列表到达起始位置时触发。
- onReachEnd:列表到底末尾位置时触发。
- onScrollStop:列表滑动停止时触发。
List({ space: 10 }) {
ForEach(this.arr, (item) => {
ListItem() {
Text(`${item}`)
...
}
}, item => item)
}
.onScrollIndex((firstIndex: number, lastIndex: number) => {
console.info('first' + firstIndex)
console.info('last' + lastIndex)
})
.onScroll((scrollOffset: number, scrollState: ScrollState) => {
console.info('scrollOffset' + scrollOffset)
console.info('scrollState' + scrollState)
})
.onReachStart(() => {
console.info('onReachStart')
})
.onReachEnd(() => {
console.info('onReachEnd')
})
.onScrollStop(() => {
console.info('onScrollStop')
})
原文地址:https://blog.csdn.net/weixin_46282323/article/details/134745776
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.7code.cn/show_42426.html
如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱:suwngjj01@126.com进行投诉反馈,一经查实,立即删除!
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。