概述

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组件提供了一系列事件方法用来监听列表的滚动,您可以根据需要,监听这些事件来做一些操作

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进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注