本文为菜鸟窝编辑吴佳林的连载。

这篇文章主要讲视图容器的最后一个组件:swiper，滑块视图容器.先来看下swiper长什么样子。

如上图所示，大家应该这个组件不是很陌生了，它就是平时我们在APP见得最多的轮播图。当然上面只是一个颜色背景，想要替换成图片也是完全可以的。

属性

indicator-dots：是否显示面板指示点，默认是false
indicator-color：指示点颜色
indicator-active-color：当前选中的指示点颜色
autoplay：是否自动切换
current：当前所在页面的 index
interval：自动切换时间间隔
duration：滑动动画时长
circular：是否采用衔接滑动
bindchange：current 改变时会触发 change 事件

swiper-item

swiper-item 就是里面 swiper 展示的面板。是不是多少个面板就需要多少个 swiper-item 呢？不是的，一般开发中，我们的 swiper-item 会嵌套在 block 标签里面，然后在 block 里面跟参数值写上 for 循环，就是可以动态展示我们的轮播的面板了。

示例使用

这些到底如何使用呢？下面看一个 demo 代码（部分）

wxml 文件


    <view class="container">
      <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
            <block wx:for="{{background}}" wx:key="*this">
              <swiper-item>
                <view class="swiper-item {{item}}"></view>
              </swiper-item>
            </block>
          </swiper>
    </view>

js文件


    Page({
      data: {
        background: ['demo-text-1', 'demo-text-2', 'demo-text-3'],
        indicatorDots: true,
        vertical: false,
        autoplay: false,
        interval: 2000,
        duration: 500
      },
      changeIndicatorDots: function (e) {
        this.setData({
          indicatorDots: !this.data.indicatorDots
        })
      },
      changeAutoplay: function (e) {
        this.setData({
          autoplay: !this.data.autoplay
        })
      },
      intervalChange: function (e) {
        this.setData({
          interval: e.detail.value
        })
      },
      durationChange: function (e) {
        this.setData({
          duration: e.detail.value
        })
      }
    })

更多内容，请关注菜鸟窝（微信公众号ID: cniao5），程序猿的在线学习平台。如需转载，请注明出处（菜鸟窝，原文链接： http://www.cniao5.com/forum/thread/aad4e850280911e78c6c00163e0230fa ）

关注公众号免费领取" N套客户端实战项目教程"