鸿蒙实现简单的每日新闻

系统 OpenHarmony
这是一篇讲解如何实现基于鸿蒙JS的简单的每日新闻。

想了解更多关于开源的内容,请访问:

​51CTO 开源基础软件社区​

​https://ost.51cto.com​

Guide

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

1、可滚动区域

在许多场景中,页面会有一块区域是可滚动的,比如这样一个简单的每日新闻模块:

『牛角书』鸿蒙实现简单的每日新闻-开源基础软件社区

『牛角书』鸿蒙实现简单的每日新闻-开源基础软件社区

上面的新闻类型是一块可横向滚动的区域,下方新闻列表是一块可竖向滚动的区域。

在鸿蒙 js 组件中,想要实现可滚动的区域,则是使用 list 组件。

list 仅支持竖向滚动,横向滚动要用 tabs。

2、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 -->
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.

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;
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.

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;
            }
        })
    },
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.

新闻列表可滚动,且不会影响搜索框的位置。

『牛角书』鸿蒙实现简单的每日新闻-开源基础软件社区

3、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>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
.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;
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.

『牛角书』鸿蒙实现简单的每日新闻-开源基础软件社区

『牛角书』鸿蒙实现简单的每日新闻-开源基础软件社区

可以看出,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"
                }
            ]
        }
    ]
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.

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 -->
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.

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;
            }
        })
    }
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.

想了解更多关于开源的内容,请访问:

​51CTO 开源基础软件社区​

​https://ost.51cto.com​

责任编辑:jianghua 来源: 51CTO 开源基础软件社区
相关推荐

2015-08-10 14:54:37

2024-06-18 08:16:49

2012-05-30 09:51:10

2010-08-31 19:53:25

DHCP功能

2021-11-10 07:44:45

Svelte前端框架

2012-05-10 13:42:26

Java网络爬虫

2012-05-03 17:37:34

iOS

2013-04-07 14:37:59

iOS开发可折叠tableVie

2018-07-02 13:10:05

Android短信验证

2009-12-14 11:12:55

Ruby运行

2010-06-03 13:21:07

HadoopHBase

2024-02-01 08:12:15

ReducerContext状态

2021-10-31 23:57:33

Eslint原理

2009-08-13 10:15:50

C#读取Excel

2010-07-08 14:53:38

SQLServer实现

2022-03-10 17:02:51

Rust单链表数据结构

2009-09-07 15:27:04

C# MessageB

2011-02-17 10:54:59

CSS3变换 简单快捷

2021-07-23 08:57:32

鸿蒙HarmonyOS应用

2019-04-03 10:50:09

Javascript区块链技术
点赞
收藏

51CTO技术栈公众号