微信小程序--轮播图

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/chq00788/article/details/74626852

微信小程序轮播图的实现是利用了swiper组件（滑块视图容器）。

• 主要参数如下：

属性名	类型	默认值	说明
indicator-dots	Boolean	false	是否显示面板指示点
indicator-color	Color	rgba(0, 0, 0, .3)	指示点颜色
indicator-active-color	Color	000000	当前选中的指示点颜色
autoplay	Boolean	false	是否自动切换
current	Number	0	当前所在页面的 index
interval	Number	5000	自动切换时间间隔
duration	Number	500	滑动动画时长
circular	Boolean	false	是否采用衔接滑动
bindchange	EventHandle		current 改变时会触发 change 事件，event.detail = {current: current}

• js文件代码如下：

data: {
    imgUrls: [
      'http://p1.image.hiapk.com/uploads/allimg/150709/7730-150F9102Q9.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
    ],
    indicatorDots: true,  //是否显示面板指示点
    autoplay: true,      //是否自动切换
    interval: 3000,       //自动切换时间间隔
    duration: 1000,       //滑动动画时长
    inputShowed: false,
    inputVal: ""
  }

• wxml文件代码如下：

<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
    <block wx:for="{{imgUrls}}">
      <swiper-item>
        <image src="{{item}}" class="slide-image" />
      </swiper-item>
    </block>
  </swiper>

wxss代码如下：

.swiper {
  height: 400rpx;
  width: 100%;
}
.swiper-image {
  height: 100%;
  width: 100%;
}
.slide-image{
   height: 100%;
  width: 100%;
}

• 效果图如下：