当前位置: 首页 > 科技观察

鸿蒙的水平滚动菜单和分组组列表菜单和fetch请求加载聚合数据

时间:2023-03-19 12:05:41 科技观察

了解更多请访问:鸿蒙科技社区https://harmonyos.51cto.com/#zz与华为官网共同打造。本文的项目是通过远程调用聚合数据做一个新闻页面。首先,必须明确以下几点Points:1.页面加载时,用户点击加载,浏览加载的任何服务器。如果一次性全部加载,不仅页面布局不堪重负,服务器的负载也会很重,造成服务器资源的浪费。2.思路过程(以制作首页为例):onInit首先加载并获取首页数据;用户单击该菜单以加载该菜单的数据。项目流程如下:1.导入鸿蒙的网络请求模块fetch(上一篇也有提到)这里,需要注意的是:一定要去config.json看看有没有二级域名配置的名称,否则您将看不到数据。比如这里是v.juhe.cn。如下图:2.由于鸿蒙没有可视化窗口,我们可以做一个调试可视化窗口。调试完成后将其移除。这个窗口的目的只是让自己通过可视化窗口清楚的看到数据是否成功获取,以便我们更好的跟踪调试。(点击事件changemenu跳转到js将当前点击的菜单项赋值给currentIndex创建调试窗口)具体代码和注解下面会详细给出。显示如下:模拟器中的单词来自聚合数据给出的样式:js业务逻辑层:importfetchfrom'@system.fetch';exportdefault{data:{title:'',currentIndex:0,type:"",bookdatas:[],//声明一个数组menus:["首页","新闻","视频","音乐","天气","生活","体育","电竞","娱乐","美食"]},onInit(){fetch.fetch({url:"http://v.juhe.cn/toutiao/index?type=top&key=401162c3e198047abc4d73d6f95aabbe",//v.juhe.cn必须去config.json看看有没有配置二级域名nameresponseType:"json",success:(resp)=>{letdatas=JSON.parse(resp.data);//转换为json数据格式this.title=datas.reason;this.bookdatas=datas.result.data;}})},changemenu(event){letclickindex=event.index;this.currentIndex=clickindex;//当前点击的菜单项赋值给currentIndexthis.type=typeofclickindex;if(clickindex==0){}elseif(clickindex==1){}}}页面渲染:{{$item}}//使用列表显示数据{{$item.title}}

two
{{currentIndex}}//返回当前索引{{type}}//返回当前表下方的值类型{{title}}//是否成功获取数据
css属性设置:.container{宽度:100%;高度:1200px;背景颜色:淡绿色;显示:弹性;弹性方向:列;}.tabs{宽度:100%;}.tab-内容{宽度:100%;高度:80%;背景色:绿色;}.oneview{width:100%;height:100%;background-color:white;}.twoview{width:100%;height:100%;background-color:skyblue;}.info{width:100%;height:20%;border:1pxsolidred;}.txtview{font-size:50px;color:red;}.listview{width:100%;height:100%;}.list-item{width:100%;height:20%;border:1pxsolidred;}最后强调一下,代码的格式一定要和调用聚合数据时聚合给出的格式一致。通俗点说,比如:我这里要获取的是结果中数据中title的数据(见下图),所以我们还需要将获取到的数组放到声明的bookdatas数组中。最终效果图如下:这样的项目其他页面也是如此。页面布局后续会持续优化。?版权归作者及鸿蒙技术社区所有。如需转载请注明出处,否则将追究法律责任。了解更多请访问:与华为官方共建鸿蒙科技社区https://harmonyos.51cto.com/#zz