三鸿蒙轮播图和轮播布局综合

noutsider

发布于 2021-1-18 20:42

8636浏览

0收藏

需读者要注意的点已经在代码中标记

data数据模型驱动:

export default {
    data: {
        //定义菜单项
        menus:[{"text":"首页","img1":"./common/shoyyeu.png","img2":"./common/shouyes.png"},
               {"text":"资讯","img1":"./common/zixunu.png","img2":"./common/zixuns.png"},
               {"text":"分类","img1":"./common/fenleiu.png","img2":"./common/fenleis.png"},
               {"text":"我的","img1":"./common/wodeu.png","img2":"./common/wodes.png"}],
                //定义一个下标
                 cinidex:0
    },
    changecontent(index){
        //赋值
        this.cinidex=index;
        //改变轮播图的具哪一项和轮播图的index
        this.$element("sw").swipeTo({index:index})
    }

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

视图层渲染样式:

<div class="first">
    <!--轮播布局start-->
 <swiper class="swipview" id="sw" index="0">   <!--通过id取到页面上的元素-->
     <div class="box one">                      <!--微信小程序中此处是current而非index-->
         <!--轮播图start-->
            <swiper class="sswiper" autoplay="true" duration="3000" indicator="true" >
                <div class="view1">
                    <text txt2> 第一幅轮播图 </text>
                </div>
                <div class="view2">
                        <text txt2> 第二幅轮播图 </text>
                </div>
                <div class="view3">
                        <text txt2> 第三幅轮播图 </text>
                </div>
                <div class="view4">
                        <text txt2> 第四幅轮播图 </text>
                </div>
            </swiper>
         <!--轮播图end-->
     </div>
     <div class="box two">
         <text class="text1">第二幅</text>
     </div>
     <div class="box three">
         <text class="text1">第三幅</text>
     </div>
     <div class="box four">
         <text class="text1">第四幅</text>
     </div>
 </swiper>
    <!--轮播布局end-->
    <!--底部菜单栏鸿蒙必修嵌套在父容器中start-->
    <div class="bottomview">
        <block for="{{menus}}">
            <div class="content" onclick="changecontent({{$idx}})">
                <div class="imges">
                    <image src="{{cinidex==$idx?$item.img1:$item.img2}}">
                    </image>
                </div>
                <div class="text">
                    <text class="{{cinidex==$idx?'a':'b'}}">
                        {{$item.text}}
                    </text>
                </div>
            </div>
        </block>
    </div>
    <!--底部菜单栏鸿蒙必修嵌套在父容器中end-->
</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.

css属性设置

.first{
    width: 100%;
    height: 1200px;
    background-color: powderblue;
}
.bottomview{
    width: 100%;
    height: 200px;
    /**border-top:3px solid red;**/
    position: fixed;
    bottom: 0px;
    left: 0px;
    background-color: white;
    display: flex;
    justify-content: space-around ;

}
.content{
    width: 22%;
    height: 90%;
    /**border:1px solid black;**/
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.imges{
    width: 40%;
    height: 40%;
    /*8border:2px solid blue;**/

}
.text{
    width: 80%;
    height: 40%;
    /**border:2px solid green ;**/
    display: flex;
    justify-content: center;

}
.a{
    color: red;
    font-size: 35px;
    font-weight: bold;
}
.b{
    font-size: 35px;
    color: grey;
    font-weight: bold;
}
.box{
    width: 100%;
    height: 90%;
}
.one{
background-color: skyblue;
    display: flex;

}
.sswiper{
    width: 100%;
    height: 500px;
}
.view1{
    width: 100%;
    height: 100%;
    background-color: darkorange;
    display: flex;
    align-items: center;
    justify-content: center;
}
.view2{
    width: 100%;
    height: 100%;
    background-color: deepskyblue;
    display: flex;
    align-items: center;
    justify-content: center;
}
.view3{
    width: 100%;
    height: 100%;
    background-color: green;
    display: flex;
    align-items: center;
    justify-content: center;
}
.view4{
    width: 100%;
    height: 100%;
    background-color: yellow;
    display: flex;
    align-items: center;
    justify-content: center;
}
.txt2{
 font-size: 150px;
    font-weight: bold;
}
.two{
    background-color: cornflowerblue;
    display: flex;
    justify-content: center;
    align-items: center;
}
.three{
    background-color: beige;
    display: flex;
    justify-content: center;
    align-items: center;
}
.four{
    background-color: darkorange;
    display: flex;
    justify-content: center;
    align-items: center;
}
.text1{
    font-family: sans-serif;
    font-weight: bold;
    font-size: 40px;
}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.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.