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

本期组件

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>

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;
}

效果图