微信小程序—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

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