【0基础学习微信小程序】视图容器（二）

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

这篇文章主要讲视图容器的最后一个组件: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
        })
      }
    })

【五一大促】菜鸟窝全场android项目实战课程低至五折，更有价值33元的四款热门技术免费领，17年初优惠力度最大的一次活动，有意向的童鞋不要错过
狂戳>>http://www.cniao5.com/hd/2017/51.html