鸿蒙js开发9 <list>和<swiper>组件实现导航菜单的构建原创

lsfzzf

发布于 2021-1-29 00:52

浏览

0收藏

本文展示了通过<list>和<swiper>组件的搭配使用实现导航菜单的构建

视图及样式：

<div class="container">
    <!--左侧导航栏-->
    <div class="leftdiv">
        <list class="listdiv">
            <block for="{{leftmenus}}">
                <list-item class="{{currentIndex==$idx?'listitem1':'listitem0'}}" onclick="onclick({{$idx}})">
                    <text class="{{currentIndex==$idx?'text1':'text0'}}">{{$item}}</text>
                </list-item>
            </block>
        </list>
    </div>
    <!--右侧内容区-->
    <div class="rightdiv">
        <swiper id="swiperid" onchange="changeswiper" vertical="true" class="swiperdiv" indicator="false">
            <div class="box one">
                <div class="boxtopdiv">
                    <text class="boxtext">one title</text>
                </div>
                <div class="boxcontentdiv">
                    <text class="boxtext">one content</text>
                </div>
            </div>
            <div class="box two">
                <div class="boxtopdiv">
                    <text class="boxtext">two title</text>
                </div>
                <div class="boxcontentdiv">
                    <text class="boxtext">two content</text>
                </div>
            </div>
            <div class="box three">
                <div class="boxtopdiv">
                    <text class="boxtext">three title</text>
                </div>
                <div class="boxcontentdiv">
                    <text class="boxtext">three content</text>
                </div>
            </div>
            <div class="box four">
                <div class="boxtopdiv">
                    <text class="boxtext">four title</text>
                </div>
                <div class="boxcontentdiv">
                    <text class="boxtext">four content</text>
                </div>
            </div>
            <div class="box five">
                <div class="boxtopdiv">
                    <text class="boxtext">five title</text>
                </div>
                <div class="boxcontentdiv">
                    <text class="boxtext">five content</text>
                </div>
            </div>
            <div class="box six">
                <div class="boxtopdiv">
                    <text class="boxtext">six title</text>
                </div>
                <div class="boxcontentdiv">
                    <text class="boxtext">six content</text>
                </div>
            </div>
            <div class="box seven">
                <div class="boxtopdiv">
                    <text class="boxtext">seven title</text>
                </div>
                <div class="boxcontentdiv">
                    <text class="boxtext">seven content</text>
                </div>
            </div>
            <div class="box eight">
                <div class="boxtopdiv">
                    <text class="boxtext">eight title</text>
                </div>
                <div class="boxcontentdiv">
                    <text class="boxtext">eight content</text>
                </div>
            </div>
            <div class="box nine">
                <div class="boxtopdiv">
                    <text class="boxtext">nine title</text>
                </div>
                <div class="boxcontentdiv">
                    <text class="boxtext">nine content</text>
                </div>
            </div>
        </swiper>
    </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.
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.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.

.container {
    width: 100%;
    height: 1300px;
    display: flex;
    flex-direction: row;
}
.leftdiv{
    width: 30%;
    height: 100%;
    border-right: 5px solid snow;
}
.listdiv{
    width: 100%;
    height: 100%;
    background-color: silver;
    display: flex;
}
.listitem0{
    width: 100%;
    height: 12%;
    border-bottom: 3px solid white;
    display: flex;
    justify-content: center;
    align-items: center;
}
.listitem1{
    width: 100%;
    height: 12%;
    border-bottom: 3px solid white;
    background-color: #3CB371;
    display: flex;
    justify-content: center;
    align-items: center;
}
.text0{
    font-size: 50px;
    color: white;
}
.text1{
    font-size: 50px;
    color: black;
    font-weight: bold;
}
.rightdiv{
    width: 69%;
    height: 100%;
}
.swiperdiv{
    width: 100%;
    height: 100%;
}
.box{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.one{
    background-color: skyblue;
}
.two{
    background-color: rebeccapurple;
}
.three{
    background-color: darksalmon;
}
.four{
    background-color: salmon;
}
.five{
    background-color: darkolivegreen;
}
.six{
    background-color: aquamarine;
}
.seven{
    background-color: chartreuse;
}
.eight{
    background-color: hotpink;
}
.nine{
    background-color: seagreen;
}
.boxtopdiv{
    width: 100%;
    height: 8%;
    border-bottom: 1px solid snow;
    display: flex;
    justify-content: center;
    align-items: center;
}
.boxtext{
    font-size: 50px;
    font-weight: bold;
}
.boxcontentdiv{
    width: 100%;
    height: 92%;
    display: flex;
    justify-content: center;
    align-items: center;
}
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.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.

业务逻辑层：

import prompt from '@system.prompt';
export default {
    data: {
        leftmenus:["one","two","three","four","five","six","seven","eight","nine"],
        currentIndex:0
    },

    //选中左侧导航栏触发
    onclick(index){
        this.currentIndex=index;
        this.$element("swiperid").swipeTo({index:index});
    },

    //滚动右侧内容区触发
    changeswiper(data){
        prompt.showToast({
            message:"滚动项的下标为:"+data.index
        });

        this.currentIndex = data.index;
    }

}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.