鸿蒙上实现简单的“每日新闻”

OpenHarmony技术社区 2022-12-26 1543
加入交流群

OpenHarmony技术社区

196 文章 71.4w阅读 40粉丝

描述

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

 

可滚动区域

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

 

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

在鸿蒙 js 组件中，想要实现可滚动的区域，则是使用 list 组件。list 仅支持竖向滚动，横向滚动要用 tabs。

list + list-item

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

 

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

 

鸿蒙

上方为一个搜索框，下方是新闻列表。搜索框给了固定高度，那么怎样让新闻列表能够占满屏幕剩余部分呢？

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

hml：

 

  
        

            
                
                
            

            
                
                    
                        
                            
                                {{ $item.title }}
                            
                            
                                
                                    {{ $item.source }}
                                
                                
                                    {{ $item.ctime }}
                                
                            
                        
                                                           
          

 

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 的子元素。

试用示例：

 


            
                
                    
                        
                            分组1 子项1
                        
                    
                    
                        
                            分组1 子项2
                        
                    
                    
                        
                            分组1 子项3
                        
                    
                
                
                    
                        
                            分组2 子项1
                        
                    
                    
                        
                            分组2 子项2
                        
                    
                    
                        
                            分组2 子项3
                        
                    
                
            
        
  
.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：

 

  
        

            
                
                    
                        
                            
                            {{ $item.name }}
                        
                        
                            
                                
                                {{ value.name }}
                            
                        
                    
                
            
        

        
  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;
            }
        })
    }

 

　　审核编辑：汤梓红

打开APP阅读更多精彩内容
声明：本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人，不代表电子发烧友网立场。文章及其配图仅供工程师学习之用，如有内容侵权或者其他违规问题，请联系本站处理。 举报投诉

全部0条评论

快来发表一下你的评论吧 !

登录/注册
下载APP
|投诉反馈|电子发烧友网
© 2021 elecfans.com
湘ICP备2023018690号
×
20
完善资料，
赚取积分