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

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

部分基本参数介绍

属性	类型	默认值	必填	说明
indicator-dots	boolean	false	否	是否显示面板指示点
autoplay	boolean	false	否	是否自动切换
current	number	0	否	当前所在滑块的 index
interval	number	5000	否	自动切换时间间隔
duration	number	500	否	滑动动画时长

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

 

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

wxml页面

弹出显示按钮
自动播放功能


  
    
      
    
  


按钮切换时长

图片滑动时长

这里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页面的参数传递