鸿蒙横向滚动菜单栏和fetch请求加载聚合数据

魔法少女郭德纲

发布于 2021-2-18 17:05

2792浏览

1收藏

*复制完域名后要先看看在config.josn中配置的域名是否相同！

display: flex;
flex-direction: column;/**按列布局**/

1.hml页面

<div class="container">
<!--鸿蒙没有横向和垂直的滚动视图组件 但是有tabs菜单栏组件 -->
    <!--vertical="false" 是否垂直  mode="scrollable" 菜单是否固定或滚动-->
    <!--onchange点击事件 -->
    <tabs class="tabs" index="{{currentindex}}" vertical="false" onchange="changemenu">
    <tab-bar class="tab-bar" mode="scrollable">
     <block for="{{menu}}">
<text>{{$item}}</text>
     </block>
    </tab-bar>
        <!-- <tab-content> 内容区组件  scrollable="true"是否滚动-->
        <tab-content class="tab-content" scrollable="true">
<div class="oneview">
<list class="listview">
<block for="{{bookdats}}">
<list-item class="list-item ">
<text>{{$item.catalog}}</text>
</list-item>
</block>
</list>
</div>
            <div class="twoview">
                <text>two</text>
            </div>
        </tab-content>
    </tabs>
<!--自定义调试方法 -->
    <div class="info">
        <text class="txeview">{{currentindex}}</text>
    </div>
    <!--自定义调试方法 -->
</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.

2.css样式

.container {
    width: 100%;
    height: 1200px;
    background-color: deepskyblue;
    display: flex;
    flex-direction: column;/**按列布局**/
}
.tabs{
    width: 100%;
    height: 100%;
    background-color: green;
}
.tab-bar{
    width: 100%;
    background-color: snow;
}
.tab-content{
    width: 100%;
    height: 75%;
}
.oneview{
    width: 100%;
    height: 100%;
    background-color: snow;
}
.twoview{
    width: 100%;
    height: 100%;
    background-color: green;
}
.info{
    width: 100%;
    height: 30%;
    border: 1px solid chocolate;
}
.txtview{
    font-size: 50px;
    color: red;
}
.listview{
    width: 100%;
    height: 100%;
}
.list-item {
    width: 100%;
    height: 20%;
    border: 3px solid deepskyblue;
}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.

3.js逻辑层

import fetch from '@system.fetch';
export default {
    data: {
        title: '',
        bookdats:[],
        currentindex:0,
        //顶部菜单栏
        menu:["首页","体育","新闻","娱乐","音乐","搞笑",]
    },
    onInit(){
//1.在onInit中首先加载首页数据  2.用户点击那个菜单加载那个菜单的数据
//用户点击hml中的onchange changemenu发生改变传到jschangemenu(event)赋值给currentindex
//最后数组下标接收currentindex从而得到改变 视图层得到想要的页面数据
        fetch.fetch({
            url:"域名地址",
            responseType:"josn",
            success:(resp)=>
            {
                let datas=JOSN.parse(resp.data);
                this.title=datas.reason;
                //用自定义的数组接收聚合文档里的数组
                this.bookdats=datas.result;
            }
        });
    } ,
    changemenu(event){
        let clickIndex=event.index;
this.currentindex=clickIndex;
        if(clickIndex==0){
}else if(clickIndex==1)
        {
        }
    }
}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.