微信小程序—swiper(滑块视图容器)

官方api：https://mp.weixin.qq.com/debug/wxadoc/dev/component/swiper.html

滑块视图容器，这里我们使用这个视图实现轮播图的效果，
效果图如下，

1.index.js中：

//index.js//获取应用实例const app = getApp()var dotsFirst = true;var isCircularFirst = true;var isVerticalFirst = true;Page({  data: {    isCircular: true,//默认衔接滑动    interval: 3000,//默认自动切换时间间隔    duration: 1000,//默认滑动动画时长    imgUrls: [      'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',      'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',      'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'    ],  },  onLoad: function () {  },  //显示/隐藏指示器  showDots: function () {    if (dotsFirst == true) {      dotsFirst = false;      this.setData({        indicatorDots: true,      });    } else {      dotsFirst = true;      this.setData({        indicatorDots: false,      });    }  },  //设置，取消衔接滑动  showCircular: function () {    if (isCircularFirst == true) {      isCircularFirst = false;      this.setData({        isCircular: true,      });    } else {      isCircularFirst = true;      this.setData({        isCircular: false,      });    }  },  //设置，取消滑动方向是否为纵向  showVertical: function () {    if (isVerticalFirst == true) {      isVerticalFirst = false;      this.setData({        vertical: true,      });    } else {      isVerticalFirst = true;      this.setData({        vertical: false,      });    }  },  //设置指示器颜色事件  icInput: function (e) {    this.setData({      indicatorColor: e.detail.value    })  },  //设置自动切换时间的间隔事件  iInput: function (e) {    this.setData({      interval: e.detail.value    })  },  //设置自动切换时间的间隔事件  dInput: function (e) {    this.setData({      duration: e.detail.value    })  },  //设置当前选中的指示点颜色事件  iacInput: function (e) {    this.setData({      indicatorActiveColor: e.detail.value    })  },})

2.index.wxml中：

<swiper indicator-dots="{{indicatorDots}}" indicator-color="{{indicatorColor}}" autoplay='{isAutoplay}' current='0' interval="{{interval}}" duration="{{duration}}" circular="{{isCircular}}" vertical="{{vertical}}" indicator-active-color="{{indicatorActiveColor}}">  <block wx:for="{{imgUrls}}" wx:key="imageKey">    <swiper-item>      <image src="{{item}}" class="image" />    </swiper-item>  </block></swiper><button class='buton' catchtap='showDots'>显示/隐藏指示器</button><button class='buton' catchtap='showCircular'>设置/取消衔接滑动</button><button class='buton' catchtap='showVertical'>设置/取消滑动方向是否为纵向</button><view>  <view class='text'>设置指示器的颜色(请使用十六进制颜色值,例如：#ff00ff)</view>  <input class="input" placeholder="" value="#" bindinput="icInput" confirm-type="done" focus/></view><view>  <view class='text'>设置自动切换时间间隔(单位毫秒(ms),例如：3000就是3秒)</view>  <input class="input" placeholder="" type="number" value="3000" bindinput="iInput" confirm-type="done" focus/></view><view>  <view class='text'>设置滑动动画时长(单位毫秒(ms),例如：1000就是1秒)</view>  <input class="input" placeholder="" type="number" value="1000" bindinput="dInput" confirm-type="done" focus/></view><view>  <view class='text'>设置当前选中的指示点颜色(请使用十六进制颜色值,例如：#ff00ff)</view>  <input class="input" placeholder="" value="#" bindinput="iacInput" confirm-type="done" focus/></view>

3.index.wxss中：

.image {  width: 100%;}.buton {  margin-top: 10rpx;}.input {  width: 100%;  padding-left: 10rpx;  margin-top: 10rpx;  font-size: 35rpx;  background-color: #ccc;}.text {  font-size: 35rpx;  margin-top: 10rpx;  padding-left: 10rpx;}

4.demo下载地址:

http://download.csdn.net/download/afanbaby/10158552

本人菜鸟一个，有什么不对的地方，希望大家指出评论，大神勿喷，希望大家一起学习进步！