微信小程序之swiper

微信小程序每个页面都要三个文件：js、wxml、wxss

swiper相当于循环滚动视图适合广告位等展示。

1.swiper.wxml

  
    swiper
    swiper
  
  
    
      
        
          
            
          
        
      
    
    
      indicator-dots
      {{vertical?'horizontal':'vertical'}}
      autoplay
    
    
    duration
    
    interval
  

#######changeIndicatorDots是点击事件是否展示dots
#######changeVertical 是点击事件是否竖向、横向
#######changeAutoplay 是时间是否自动滚动
#######durationChange 改变持续时间
#######intervalChange 改变间隔时间
#######点击事件具体实现在js中代码。

2.swiper.js

Page({
  data: {
    background: ['green', 'red', 'yellow'],
    indicatorDots: true,
    vertical: false,
    autoplay: false,
    interval: 3000,
    duration: 1200
  },
  changeIndicatorDots: function (e) {
    this.setData({
      indicatorDots: !this.data.indicatorDots
    })
  },
  changeVertical: function (e) {
    this.setData({
      vertical: !this.data.vertical
    })
  },
  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
    })
  }
})

#######在页面上绑定的事件变化具体时间在这个js实现。

3.swiper. wxss

.swiper-item{
  display: block;
  height: 150px;
}
.page {
  background-color: #fbf9fe;
  height: 100%;
}
.btn-area{
    padding: 0 30px;
}
.section__title{
    margin-bottom: 16rpx;
    padding-left: 30rpx;
    padding-right: 30rpx;
}
.section_gap .section__title{
    padding-left: 0;
    padding-right: 0;
}
.section{
    margin-bottom: 80rpx;
}
.section_gap{
    padding: 0 30rpx;
}

#######页面所需要的css。

效果展示.png

demo地址

https://github.com/miaozhang9/WeAppDemo