/**# encoding: utf-8# 版权所有 2025 ©涂聚文有限公司™ ®# 许可信息查看：言語成了邀功盡責的功臣，還需要行爲每日來值班嗎# 描述： 数组# Author : geovindu,Geovin Du 涂聚文.# IDE : DevEco Studio 5.1.1 HarmonyOS# os : windows 10# database : mysql 9.0 sql server 2019, postgreSQL 17.0 Oracle 21c Neo4j# Datetime : 2025/7/27 20:13# User : geovindu# Product : DevEco Studio# Project : MyApplication# File : ListPage.ets**/
@Entry
@Component
struct ListPage {@State message: string = 'Hello World';@State cc:number=0@State ls:string[][]=[['坠饰', '戒指', '对戒', '项链', '吊坠', '耳钉', '手镯', '手链', '串饰', '摆件'],['DiaBling', ' Shimmering', 'Fortune', 'Snake', 'Heirloom', 'HexiconHot', 'Beloved', 'Wedding', 'Love', 'Beauty'],['人气爆款', '钻光影金', '金蛇献宝', '福满传家', '悦己爱己', '天天爱上新', '爱很美', '婚嫁', '囍爱', 'Goldstyle'],['Hexicon', 'Your Style', 'Dear Q', '玄酷', '抱抱家庭', '娉婷', 'E意大利', '银饰间<', '金龙献福', '宝爵']]//分组的数据封装数组@State nameList: string[] = ['黄金','钻石', '珍珠', '宝银']@Builder itemHead(headName: string){Text(headName).fontSize(20).fontWeight(600).width('100%').backgroundColor('#ffb0adad').padding(10)}//设置下标变量private listScroller: Scroller = new Scroller()build() {//层叠布局，里面的元素不做处理，会叠在一起//设置位置在底部Stack({alignContent: Alignment.BottomEnd}){Image($r('app.media.list_item_top_icon')).width(50).height(50)//设置在层叠布局展示的顺序.zIndex(1).backgroundColor('#ffe7e3e3').padding(10)//内边距.margin({right: 40,bottom: 20}).borderRadius(50)//组件添加线条.border({width: 1,color: '#ffb7b4b4'}).onClick(() => {//点击向上箭头的图标，实现逻辑操作,通过点击图片实现修好list组件的下标，改为0this.listScroller.scrollToIndex(0)})//注意：如果要实现回到顶部公共，学要进行绑定操作List({scroller: this.listScroller}){ForEach(this.nameList,(ithead:string,index:number)=>{ListItemGroup({header:this.itemHead(ithead)}){ForEach(this.ls[index],(item: string) => {ListItem(){Text(item).fontSize(20).height(100)}})}.divider({strokeWidth: 1,color: Color.Gray})})}//添加粘性标题.sticky(StickyStyle.Header).alignListItem(ListItemAlign.Center).scrollBar(BarState.Auto).scrollBarColor(Color.Orange).scrollBarWidth(10)}.width('100%').height('100%')}}
