微信小程序 wxml组件开发（二） swiper轮播页面_wxml swiper

微信小程序有着强大而简洁设计的前端组件，这一章我们来看看轮播页面——swiper要如何进行设计

部分基本参数介绍

swiper有很多很有意思的功能设计，这里主要介绍indicator-dots,autoplay,interval,duration四个常用功能，分别是指示点，自动切换，切换时间间隔，滑动动画时长。

制作一个简单的图片轮播页面：

wxml页面

 
<button bindtap="dots_infor" style=" background-color: rgb(18, 182, 18); color: #fff; box-sizing: content-box;display: inline-block;">弹出显示按钮</button>
<button bindtap="play_way" style=" background-color: rgb(18, 182, 18); color: #fff; box-sizing: content-box;display: inline-block;">自动播放功能</button>
 
<swiper
  indicator-dots="{{dots_info}}"
  autoplay="{{play_way}}"
  interval="{{interval_time}}"
  duration="{{duration_time}}"
>
  <block wx:for="{{bigImgs}}" wx:key="">
    <swiper-item>
      <image src="{{item}}"  width="200" height="200" />
    </swiper-item>
  </block>
</swiper>
 
按钮切换时长
<slider bindchange="interval_time_button" show-value min="200" max="2000" />
图片滑动时长
<slider bindchange="duration_time_button" show-value min="500" max="10000" />

这里swiper中有四个功能设置：indicator-dots,autoplay,interval,duration。

其中两个button分别管理：indicator-dots,autoplay，dots_infor是indicator-dots是否显示，pay_way是autoplay是否自动

其中两个slider分别管理：interval,duration，interval_time_button是interval的参数，duration_time_button是duration的参数

js页面

Page({
  data: {
    dots_info: false,
    play_way: false,
    interval_time: 200,
    duration_time: 1200,
    bigImgs: [
      'https://ksyueying-1252848593.cos.ap-chengdu.myqcloud.com/rt/gezi/1.jpeg',
      'https://ksyueying-1252848593.cos.ap-chengdu.myqcloud.com/rt/gezi/10.jpeg',
      'https://ksyueying-1252848593.cos.ap-chengdu.myqcloud.com/rt/gezi/11.jpeg',
      'https://ksyueying-1252848593.cos.ap-chengdu.myqcloud.com/rt/gezi/12.jpeg',
      'https://ksyueying-1252848593.cos.ap-chengdu.myqcloud.com/rt/gezi/13.jpeg'
    ],
  },
  dots_infor(e) {
    this.setData({
      dots_info: !this.data.dots_info
    })
  },
  play_way(e) {
    this.setData({
      play_way: !this.data.play_way
    })
  },
  interval_time_button(e) {
    this.setData({
      interval_time: e.detail.value
    })
  },
  duration_time_button(e) {
    this.setData({
      duration_time: e.detail.value
    })
  }
})

以上是js页面的参数传递