鸿蒙轮播布局及轮播图

本期组件

1.autoplay  是否自动播放 true是  false否

2.indicator 指示器 小圆点  不写的话默认是有的

3.loop 是否循环 不写的话也是默认循环 不想循环可以写成false

4.duration 持续时间

5.interval  间隔时间

6.id     这个轮播图唯一的命名编号

7.index   轮播下标  从什么地方开始

另外还有一个代码提示器的问题

这里的间隔时间不应该有true

页面hml

<div class="container">
    <!--轮播布局 -->
    <swiper class="swiperview" id="mmbh" index="0" >
      <div class="box one">
         <!--轮播图 -->
<swiper class="swtxt" autoplay="true" duration="5000" interval="3000"
        indicator="false" loop="false" 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">
            <text class="txtx">第二幅</text>
        </div>
        <div class="box three">
            <text class="txtx">第三幅</text>
        </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>

js逻辑层

样式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: saddlebrown;
}
.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%;
}