css：/*本地新闻*/.searchView{width:100%;高度：140px；背景色：#f0f0f0；显示：弹性；对齐项目：中心；}.searchView>图像{边距：040px040px；高度：60px；width:60px;}.searchView>input{margin-right:40px;}.localView{width:100%;弹性：1；显示：弹性；flex-direction:column;}.localContent{margin-left:20px;}.newsItem{width:100%;高度：240px；border-bottom:1pxsolid#bbbbbb;显示：弹性；对齐项目：中心；}.newsContent{显示：flex；弹性方向：列；右边距：20px；margin-left:20px;}.newsContent>text{margin-top:20px;高度：140px；字体大小：34px；颜色：#333333；}.newsDesc{高度：60px；行高：60px；显示：弹性；只是ify-content:space-between;}.newsDesc>text{字体大小:28px;颜色：#777777；}js：searchLocalNews(){leturl='http://api.tianapi.com/areanews/index?key=xxxx&areaname=江苏';如果(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+list-item-group+list-itemlist组件list-item-group的子元素也可以是list-item-group，顾名思义，它应该是分组列表项，list-item是list-item-group的子元素。试用示例：.manageList{高度：100%；宽度：100%；}.list-item-group{宽度：100%；高度：450px;}.list-item{宽度：100%;高度：150px；显示：弹性；证明内容：居中；对齐项目：居中；border-bottom:1pxsolidgray;}.list-item>text{line-height:100px;}可见list-item-group是一个可折叠的列表分组，默认是折叠的。单击右侧的小箭头以展开列表。如果list-item-group给的是height，折叠展开后该区域的高度不变。折叠时，显示第一个列表项的内容。那么如果每个list-item-group中的list-item个数不固定的话，展开后的布局会很难看。如下：其实不定义list-item-group的高度就够了。折叠高度是列表项的高度。展开后高度自适应增长。它可以滚动到列表的高度之外。功能还是很强大的。更改css后的效果如下：这种分组列表可以做一个简单的后台管理系统菜单界面。这里我把菜单数据文件和图片文件放到nginx服务器的目录下，然后通过内网穿透访问资源。注意数据的格式。list-item-group和list-item之间存在父标签关系，所以数据中也应该存在父关系。list-item-group显示的内容是其下的第一个list-item，这里用双for循环实现：":"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":"Editor","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;}})}想了解更多For更多开源信息请访问：开源基础软件社区https://ost.51cto.com