List 场景题(一)

入门版本 滚动

@Entry
@Component
struct Index2 {
    private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

    build() {
        Column() {
            List({ space: 20, initialIndex: 0 }) {
                ForEach(this.arr, (item: number, index) => {
                    ListItemGroup() {
                        ListItem() {
                            Column({ space: 20 }) {
                                Text("" + item.toString())
                                    .fontSize(25)
                                    .fontColor(Color.Red)
                                    .width('100%')
                                    .height(100)
                                    .textAlign(TextAlign.Center)
                                    .backgroundColor(0xFFFFFF)
                                    .borderRadius(10)
                                Text("" + item.toString())
                                    .fontSize(25)
                                    .fontColor(Color.Red)
                                    .width('100%')
                                    .height(100)
                                    .textAlign(TextAlign.Center)
                                    .backgroundColor(0xFFFFFF)
                                    .borderRadius(10)
                            }

                        }
                    }
                })

            }
            .width('90%')
            // 滑动方向 默认竖直
            .listDirection(Axis.Vertical)
            // 滚动条是否显示和关闭(主要)
            .scrollBar(BarState.Off)
            // 阻尼系数 数值越大，滑动距离越小
            .friction(0.6)
            // 分割线(次要)
            .divider({
                strokeWidth: 5,
                color: Color.Red,
                startMargin: 20,
                endMargin: 20
            })
            // 滑动到边缘效果(次要)
            .edgeEffect(EdgeEffect.Spring)
            // 获取滚动的序号(次要)
            .onScrollIndex((firstIndex: number, lastIndex: number, centerIndex: number) => {
                console.info("起始序号" + firstIndex.toString())
                console.info("结束序号" + lastIndex.toString())
                console.info("中间序号" + centerIndex.toString())
            })
            // start:里面有3个属性 index 序号 itemIndexInGroup.序号.itemGroupArea
            .onScrollVisibleContentChange((start: VisibleListContentInfo, end: VisibleListContentInfo) => {
                console.info(JSON.stringify(start))
                console.info("------")
                console.info(JSON.stringify(end))
            })
        }
        .width('100%')
        .height('100%')
        .backgroundColor(0xDCDCDC)
        .padding({
            top: 5
        })
    }
}