苹果手机主屏幕布局怎么设置（苹果手机主屏幕布局怎么设置小窗口）

最近，许多读者对如何设置苹果手机主屏幕布局有疑问。一些网民整理了相关内容，希望回答您的疑问。关于如何为苹果手机的主屏幕布局设置一个小窗口，本网站也为您找到了问题的答案，希望能对您有所帮助。

这是对如何实现基于鸿蒙的解释 JS 简单的每日新闻。

可滚动区域

在许多场景中，页面上会有一个可以滚动的区域，比如这样一个简单的日常新闻模块：

上面的新闻类型是一个横向滚动区，下面的新闻列表是一个垂直滚动区。

在鸿蒙 js 在组件中，如果要实现滚动区域，则使用它 list 组件。list 仅支持垂直滚动，应使用水平滚动 tabs。

list list-item

以本地新闻模块为例，数据请求自天行数据接口：

https://www.tianapi.com/apiview/154

上面是搜索框，下面是新闻列表。搜索框给出了一个固定的高度，那么如何让新闻列表占据屏幕的剩余部分呢？

只需设置父容器 flex 布局，list 设置 flex：1 即可。list 下直接放 list-item，超过总高度 list 高度后，可以上下滚动。

hml：

<!-- 本地新闻 --> <div> <div class="searchView"> <image src="{{ searchIcon }}"></image> <input placeholder="搜索你想看的"></input> </div> <list class="localView"> <block for="{{ localNews }}"> <list-item class="newsItem"> <div class="newsContent"> <text>{{ $item.title }}</text> <div class="newsDesc"> <text>{{ $item.source }}</text> <text>{{ $item.ctime }}</text> </div> </div> </list-item> </block> </list> </div> <!-- 本地新闻end -->

css：

本地新闻*//*.searchView{ width: 100%; height: 140px; background-color: #f0f0f0; display: flex; align-items: center;}.searchView>image{ margin: 0 40px 0 40px; 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: 1px solid #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(){ let url='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=>{ let data=JSON.parse(res.data); this.localNews=data.newslist; }}) },

新闻列表可以在不影响搜索框位置的情况下滚动。

list list-item-group list-item

list 组件的子元素也可以是 list-item-group，顾名思义，应该是分组列表项，list-item 作为 list-item-group 的子元素。

试用示例：

<div> <list class="manageList"> <list-item-group class="list-item-group"> <list-item class="list-item"> <text> <span>分组1 子项1</span> </text> </list-item> <list-item class="list-item"> <text> <span>分组1 子项2</span> </text> </list-item> <list-item class="list-item"> <text> <span>分组1 子项3</span> </text> </list-item> </list-item-group> <list-item-group class="list-item-group"> <list-item class="list-item"> <text> <span>分组2 子项1</span> </text> </list-item> <list-item class="list-item"> <text> <span>分组2 子项2</span> </text> </list-item> <list-item class="list-item"> <text> <span>分组2 子项3</span> </text> </list-item> </list-item-group> </list> </div>

.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: 1px solid gray;}.list-item>text{ line-height: 100px;}

可以看出，list-item-group 是可折叠的列表分组，且默认是折叠的。

点击右侧小箭头可展开列表，如果 list-item-group 给了高度，则折叠和展开后这一块区域的高度不变。在折叠时，展示第一个 list-item 的内容。

那么如果每一个 list-item-group 中 list-item 数目不固定，在展开后的布局就会很难看。

如下：

其实不定义 list-item-group 的高度即可，折叠高度为 list-item 的高度，展开后高度自适应增长，超出 list 高度可以滚动，功能还是很强大的。

更改 css 后的效果如下：

这种分组的列表，可以制作一个简单的后台管理系统菜单界面。这里我将菜单数据文件、图片文件放入 nginx 服务器的目录中，再通过内网穿透访问资源。

注意数据的格式，list-item-group 和 list-item 之间存在父级标签关系，故数据中也应存在父级关系。

list-item-group 展示的内容是其下第一个 list-item，这里用一个两重 for 循环实现：

manage.json：

{ "manageList": [ { "name": "组织管理", "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": "修改人员", "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：

<!-- 管理 --> <div> <list class="manageList"> <block for="{{ manageList }}"> <list-item-group class="list-item-group"> <list-item class="list-item"> <image src="{{ $item.icon }}"></image> <text>{{ $item.name }}</text> </list-item> <block for="{{ (index, value) in $item.subList }}"> <list-item class="list-item"> <image src="{{ value.icon }}"></image> <text>{{ value.name }}</text> </list-item> </block> </list-item-group> </block> </list> </div> <!-- 管理end -->

js：

getManageList() { let url="http://milkytea.free.idcfengye.com/text/manage.json"; fetch.fetch({ url: url, responseType: 'json', success: res=> { let data=JSON.parse(res.data); this.manageList=data.manageList; } }) }