鸿蒙list列表组件和tabs菜单栏组件

魔法少女郭德纲

发布于 2021-2-13 20:07

1071浏览

2收藏

本期组件

1.<list> 列表组件

2.<list-item> 列表里每个项

3.<tabs> 菜单栏组件

4.<tab-bar> 顶部菜单栏组件

5.<tab-content> 菜单栏内容区

6.vertical 是否垂直

7.mode="fixed" 是否固定

8.scrollable 是否支持滚动

hml页面布局

<div class="container">
    <!--轮播布局 -->
    <swiper class="swiperview" id="mmbh" index="0" >
      <div class="box one">
         <!--轮播图 -->
<swiper class="swtxt" autoplay="true" duration="3000" interval="3000"
        indicator="false" loop="true" index="0">
<div class="switem">
    <image class="tt1" src="/common/b1.png"></image>
</div>
    <div class="switem">
        <image class="tt1" src="/common/b2.png"></image>
    </div>
    <div class="switem">
        <image class="tt1" src="/common/b3.png"></image>
    </div>
</swiper>
       <!--轮播图 -->
      </div>
        <div class="box two">
             <tabs class="c1" index="0" vertical="false">
<tab-bar class="c2" mode="scrollable">
    <text>推荐</text>
    <text>健康</text>
    <text>本地</text>
</tab-bar>
       <tab-content class="c3" scrollable="false">
           <div class="c4 t1">
           <text class="d1">推荐的内容区</text>
           </div>
           <div class="c4 t2">
               <text class="d1">健康的内容区</text>
           </div>
           <div class="c4 t3">
               <text class="d1">本地的内容区</text>
           </div>
       </tab-content>  
            </tabs>
        </div>
        <div class="box three">
            <div class="b1">
                <text>{{name}}</text>
            </div>
                <list class="b2">
                    <list-item class="b3" for="{{shuzu2}}">
 <div class="imgview2">
 <image class="b5" src="{{$item.img3}}"></image>
 </div>
    <text class="b4">{{$item.mz}}</text>
 <text class="b4">{{$item.jiage}}</text>
                    </list-item>
                </list>
        </div>
        <div class="box four">
            <text class="txtx">第四幅</text>
        </div>
    </swiper>
    <!--轮播布局 -->
    <!--底部菜单栏 -->
<div class="a1">
    <block for="{{shuzu}}">
        <div class="a2" onclick="csff({{$idx}})">
            <div class="a3">
 <image class="a5" src="{{conttn==$idx?$item.img1:$item.img2}}"></image>
            </div>
            <div class="a4">
      <text class="{{conttn==$idx?'a7':'a6'}}">{{$item.text}}</text>
            </div>
        </div>
    </block>
</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.

css样式布局

.container {
    width: 100%;
    height: 1500px;
   background-color: antiquewhite;}
.a1{
    width: 100%;
    height: 150px;
    border-top: 2px solid black;
    background-color: snow;
    position: fixed;
    bottom: 0px;
    left: 0px;
    display: flex;
    justify-content: space-around;}
.a2{
    width: 23%;
    height: 95%;
  /**  border: 1px solid red;**/
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;}
.a3{
    width: 65%; 
    height: 60%;
   /** border: 1px solid fuchsia;**/
    display: flex;
    justify-content: center;
    /**align-items: center;**/
   align-items: flex-end;}
.a4{
    width: 65%;
    height: 35%;
   /** border: 1px solid saddlebrown;**/
    display: flex;
    justify-content: center;
    align-items: center;
}
.a5{
    width: 80px;
    height:80px;}
.a6{
    color: black;
    font-size: 30px;
    font-weight: bold;}
.a7{
    color: deepskyblue;
    font-size: 30px;
    font-weight: bold;}
.swiperview{
    width:100%;
    height:100%;
}
.box{
    width: 100%;
    height: 100%;
}
.one{
    background-color: deepskyblue;
}
.two{
    background-color: fuchsia;
}
.three{
    background-color: snow;
    display: flex;
    flex-direction: column;/**按列布局**/
}
.four{
    background-color: blueviolet;
}
.txtx{
    font-size: 60px;
    font-family: sans-serif;
}
.swtxt{
    width: 100%;
    height: 300px;
}
.switem{
    width: 100%;
    height: 100%;
}
.tt1{
    width: 100%;
    height: 100%;
}
.b1{
    width: 100%;
    height: 10%;
    border-bottom: 5px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
}
.b2{
    width: 100%;
    height: 95%;
}
.b3{
    width: 100%;
    height: 80px;
    border-bottom: 5px solid lightblue;
    display: flex;
    align-items: center;/**垂直居中**/
    justify-content: space-around;
}
.imgview2{
width: 30%;
    /*border:2px solid black;*/
    height: 80px;
}
.b4{
    width: 30%;
    /*border:2px solid black;*/
    height: 60px;
 text-align: center;/**行级标签**/
}
.b5{
    width: 60px;
    height: 60px;
}
.c1{
    width: 100%;
    height: 100%;
}
.c2{
    width: 100%;
    height: 60px;
    background-color: snow;
}
.c3{
    width: 100%;
    height: 100%;
}
.c4{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.t1{
    background-color: lightblue;
}
.t2{
    background-color: red;
}
.t3{
    background-color: deepskyblue;
}
.d1{
    font-size: 60px;
}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.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.
143.
144.
145.
146.
147.
148.
149.
150.
151.
152.
153.
154.