css：/*localnews*/.searchView{width:100%;height:140px;background-颜色：#f0f0f0；显示：flex；对齐项目：中心；}.searchView>image{margin:040px040px;height:60px;width:60px;}.searchView>input{margin-right:40px;}.localView{width:100%;flex:1;display:flex;flex-direction:column;}.localContent{margin-left:20px;}.newsItem{width:100%;height:240px;border-bottom:1pxsolid#bbbbbb;display:flex;align-items:center;}.newsContent{display:flex;flex-direction:column;margin-right:20px;margin-left:20px;}.newsContent>text{margin-top:20px;height:140px;font-size:34px;color:#333333;}.newsDesc{height:60px;line-height:60px;display:flex;justify-content:space-between;}.newsDesc>text{font-size:28px;color:#777777;}js:searchLocalNews(){leturl='http://api.tianapi.com/areanews/index?key=xxxx&areaname=江苏';if(this.searchWord){url=url+'&word'+this.searchWord;}fetch.fetch({url:url,responseType:'json',success:res=>{letdata=JSON.parse(res.data);this.localNews=data.newslist;}})}，新闻列表可以滚动，不影响搜索框的位置3.列表的子元素+list-item-group+list-itemlist组件也可以是list-item-group，顾名思义should是一个分组的列表项，list-item是list-item-group的子元素。随便写一点看看：.manageList{height:100%;width:100%;}.list-item-group{width:100%;height:450px;}.list-item{width:100%;height:150px;display:flex;justify-content:center;align-items:center;border-bottom:1pxsolidgray;}.list-item>text{line-height:100px;}可以看出list-item-group是一个可折叠的列表分组，默认就是点击折叠列表右侧的小箭头展开列表。如果给list-item-group一个高度，这个区域的高度在折叠展开后不会改变。折叠时，显示第一个列表项的内容。那么如果每个list-item-group中的list-item个数不固定的话，展开后的布局会很难看。如下：其实list-item-group的高度是没有必要定义的。折叠高度是列表项的高度。展开后高度自适应增长。它可以滚动到列表的高度之外。功能还是很强大的。更改css后的效果如下：这种分组列表可以做一个简单的后台管理系统菜单界面。这里我把菜单数据文件和图片文件放到nginx服务器的目录下，然后通过内网穿透访问资源。注意数据的格式。list-item-group和list-item之间存在父标签关系，所以数据中也应该存在父关系。list-item-group显示的内容是其下的第一个list-item，这里用双for循环实现：manage.json:{"manageList":[{"name":"OrganizationManagement","icon":"http://milkytea.free.idcfengye.com/images/christools/icon/org.png","subList":[{"name":"查询机构","icon":"http://milkytea.free.idcfengye.com/images/christools/icon/search.png"},{"name":"添加组织","icon":"http://milkytea.free.idcfengye.com/images/christools/icon/add.png"},{"name":"删除组织","icon":"http://milkytea.free.idcfengye.com/images/christools/icon/delete.png"}]},{"name":"人事管理","icon":"http://milkytea.free.idcfengye.com/images/christools/icon/person.png","subList":[{"name":"查询人员","icon":"http://milkytea.free.idcfengye.com/images/christools/icon/search.png"},{"name":"添加人员","icon":"http://milkytea.free.idcfengye.com/images/christools/icon/add.png"},{"name":"批量导入人员","icon":"http://milkytea.free.idcfengye.com/images/christools/icon/add.png"},{"name":"删除人员","icon":"http://milkytea.free.idcfengye.com/images/christools/icon/delete.png"},{"name":"Modifier","icon":"http://milkytea.free.idcfengye.com/images/christools/icon/update.png"}]},{"name":"卡片管理","icon":"http://milkytea.free.idcfengye.com/images/christools/icon/card.png","subList":[{"name":"开卡","icon":"http://milkytea.free.idcfengye.com/images/christools/icon/add.png"},{"name":"退款卡","icon":"http://milkytea.free.idcfengye.com/images/christools/icon/delete.png"}]}]}hml:js:getManageList(){leturl="http://milkytea.free.idcfengye.com/text/manage.json";fetch.fetch({url:url,responseType:'json',success:res=>{letdata=JSON.parse(res.data);this.manageList=data.manageList;}})}更多信息，请访问：Harmonyos.com/#zz