当前位置：首页 > 科技观察

HarmonyOS-ArkUI（JS）列表自定义区域组件_0

时间：2023-03-12 06:39:46 科技观察

了解更多开源请访问：51CTO开源基础软件社区https://ost.51cto.com前言列表是一个组件用于显示列表。它包含一系列相同宽度的列表项，适用于连续多行呈现同一类型的数据。本文将使用列表组件实现按字母顺序索引的区域列表和可折叠区域列表。是的子组件，实现列表分组功能，不能嵌套，但可以嵌套。是的子组件，显示列表的具体项。效果展示1.字母索引定位到列表中的相应位置。2、列表滑动时，也同步定位到字母索引处。3.点击打开折叠的城市名称，再次点击关闭当前列表。listlist组件通常用于包含一系列相同宽度的列表项的列表。List子组件只支持list-item-group和list-item。list属性展示主要知识点列表容器（List）：该组件从API版本4开始支持。循环渲染（for）：默认$item代表数组中的元素，$idx代表数组中元素的索引。字母索引栏（indexer）:"indexer":"true"表示使用默认的字母索引表。实现思路1.城市列表布局主要结构//索引城市列表{{$item.name}}

//折叠城市列表

{{listitem.name}}

{{listgroup.name}}2.列表数据格式索引字母城市列表数据[{"name":"北京","拼音":"北京","id":110100},{"name":"天津","拼音":"天津","id":120100},{"name":"石家庄","拼音":"ShiJiaZhuang","id":130100},{"name":"Tangshan","pinyin":"TangShan","id":130200}......]折叠城市列表数据。[{"id":140000,"list":[{"id":140100,"list":[{"id":"140105","name":"SmallShop","pinyin":"XiaoDian"},{"id":"140106","name":"Yingze","pinyin":"YingZe"},{"id":"140107","name":"Xinghualing","pinyin":"XingHuaLing"},{"id":"140108","name":"JianCaoping","pinyin":"JianCaoPing"},{"id":"140109","name":"WanBolin","pinyin":"WanBaiLin"},{"id":"140110","name":"Jinyuan","pinyin":"JinYuan"},{"id":"140121","name":"Qingxu","pinyin":"QingXu"},{"id":"140122","name":"Yangqu","pinyin":"YangQu"},{"id":"140123","name":"Loufan","pinyin":"LouFan"},{"id":"140181","name":"Gujiao","pinyin":"GuJiao"}],"name":"Taiyuan","pinyin":"TaiYuan"},......]3.Therearemanycitydatatobeprocessed,soputtheminaseparatefilehere,useimporttoimport//初始化数据import*asinfofrom'../../common/city.js'exportdefault{data:{listData:[],},onInit(){letcityData=info.default.city;让citylist=[];cityData.forEach(item=>{item.list.forEach(itemChild=>{letobj={name:itemChild.name,pinyin:itemChild.pinyin,id:itemChild.id,}citylist.push(obj)});});this.listData=citylist;},}4.字母索引导航巧妙结合API提供的索引器：侧边栏是否显示快捷字母索引栏。当设置为true或自定义索引时，索引栏将显示在列表的右边框。点击索引栏索引列表项需要list-item子组件配合设置相应的section属性。section：当前项的匹配字符串，如果不设置则为空。不支持动态修改。只有组内的主要项目设置有效。项目源码https://gitee.com/YiRanRuMeng/harmony-os-region-selecter。总结该组件主要用于区域选择或区域显示：使用列表组件时注意：section：当前项的匹配字符串，如果不设置则为空。不支持动态修改。只有组内的主要项目设置有效。groupcollapse和groupexpand事件仅受列表项组组件支持。indexer属性需要设置为column和flex-direction属性，columns属性设置为1才能生效。了解更多开源信息，请访问：51CTO开源基础软件社区https://ost.51cto.com。

上一篇：Nginx如何将HTTP重定向到HTTPS

下一篇：ArkUI eTS健康饮食APP之自定义PieChart组件

HarmonyOS-ArkUI（JS）列表自定义区域组件_0相关文章

最新推荐

猜你喜欢