#2020征文-手机#鸿蒙js开发9：鸿蒙的分类导航视图的实现原创

六合李欣

发布于 2021-1-27 16:04

浏览

1收藏

1.视图效果

#2020征文-手机#鸿蒙js开发9：鸿蒙的分类导航视图的实现-鸿蒙开发者社区

2.js逻辑部分

import prompt from '@system.prompt';
export default {
    data: {
        currentIndex:0,
        title: 'World',
        leftmenudatas:["水果","素菜","铁板烧","火锅","西餐","冷盘","水果","素菜","铁板烧","火锅","西餐","冷盘"]
    },
    changeview(index)
    {
        this.currentIndex=index;
        this.$element("swiperid").swipeTo({index:index});
    },
    changeswiper(e)
    {
//        prompt.showToast({
//            message:"滚动的项是:"+e.index
//
//        });

        this.currentIndex=e.index;
    }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.

3.页面视图部分

<div class="container">
     <div  class="leftview">
        <list  class="listview">
            <block  for="{{leftmenudatas}}">
                <list-item  class="{{currentIndex==$idx?'listitem1':'list-item'}}" onclick="changeview({{$idx}})">
                    <text class="{{currentIndex==$idx?'tv2':'tv1'}}">{{$item}}</text>
                </list-item>
            </block>
        </list>
     </div>
    
    <div  class="rightview">
       <swiper id="swiperid"  onchange="changeswiper" vertical="true" class="swiperview"  index="0" indicator="false">
          <div  class="box  one">
              <text>one</text>
          </div>
           <div class="box  two">
               <text>two</text>
           </div>
           <div class="box  three">
               <text>three</text>
           </div>
           <div class="box  four">
               <text>four</text>
           </div>
           <div class="box  five">
               <text>five</text>
           </div>
           <div class="box  six">
               <text>six</text>
           </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.

4.样式部分

.container {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 1500px;

}
.leftview{
    width: 30%;
    height: 100%;
    position: fixed;
    left: 0px;
    top: 0px;
    background-color: lightgray;
    border-right: 5px  solid  snow;
}
.listview{
    width: 100%;
}
.list-item{
    width: 100%;
    height: 15%;
    border-bottom: 5px  solid  snow;
    display: flex;
    justify-content: center;
    align-items: center;
}
.tv1{
    color: snow;
    font-weight: bold;
    font-family: sans-serif;
    letter-spacing: 8px;
}
.rightview{
    width: 69%;
    height: 100%;
    position: fixed;
    bottom: 0px;
    right: 0px;
}
.box{
    width: 100%;
    height: 100%;
}
.one{
    background-color: palevioletred;
}
.two{
    background-color: green;
}
.three{
    
    background-color: deepskyblue;
    
}
.four{
    background-color: aqua;
    
}
.five{
    
    background-color: rebeccapurple;
    
}
.six{
    
    background-color: palevioletred;
    
}
.listitem1{
    width: 100%;
    height: 15%;
    border-bottom: 5px  solid  snow;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: aqua;
}
.tv2{
    color: black;
    font-weight: bold;
    font-family: sans-serif;
    letter-spacing: 8px;
}

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.