微信小程序——swiper组件

微信小程序——swiper组件是滑块视图容器。下面我们先看一下效果，它可以左右滑动，切换

<swiper-item></swiper-item>组件放在<swiper></swiper>组件中,下面介绍一下它的几个常用的属性

属性名	类型	默认值	说明
indicator-dots	Boolean	false	是否显示面板指示点

autoplay

Boolean

false

是否自动切换

interval

Number

5000

自动切换时间间隔

duration

Number

500

滑动动画时长

注意：微信小程序中的组件属性，如果是Boolean型，只要写属性的名称就会为true，例如autoplay=“true”和autoplay是一样的显示效果，只有autoplay=“{{false}}”或者不写，才不显示

下面来看一下代码 .wxml

  <!-- 轮番图-->
  <view>
  <swiper indicator-dots autoplay interval="{{interval}}" duration="{{duration}}">
      <block wx:for="{{banners}}">
        <swiper-item>
          <image src="{{item.imgUrl}}" class="img"/>
        </swiper-item>
      </block>
    </swiper>  
  </view>

.js这里写一些添加的数据

Page（{
   data：{
interval: 3000, //自动切换时间间隔,3s
    duration: 1000, //  滑动动画时长1s
    hidden: false,
      
banners:[
      {  "id":1,
        "imgUrl": '../../images/2.jpg'，
      },
      {
        "id": 2,
        "imgUrl": '../../images/1.jpg',
      },
      {
        "id": 3,
        "imgUrl": '../../images/3.jpg',
      }
    ],

   }
}）

.wxss样式修饰，根据个人喜好，

.img{
width:750rpx;
height:320rpx;
}

好啦，一个简单的轮番图就做好了，如果想了解swiper更加详细的内容，这是微信开发文档，可以看一下，非常详细——>微信开发文档swiper链接