【微信小程序】视图容器-swiper组件

来源：互联网发布：优秀程序员简历模板编辑：程序博客网时间：2024/05/19 10:40

本文参考了微信官方文档：https://mp.weixin.qq.com/debug/wxadoc/dev/component/swiper.html?t=20161107

swiper组件有点像android中的ViewPager

swiper有下面几个重要的属性

属性名类型默认值说明indicator-dotsBooleanfalse是否显示面板指示点autoplayBooleanfalse是否自动切换currentNumber0当前所在页面的 indexintervalNumber5000自动切换时间间隔durationNumber1000滑动动画时长bindchangeEventHandle current 改变时会触发 change 事件，event.detail = {current: current}提供一个小Demo，效果图如下

index.wxml

<swiper indicator-dots="{{indicatorDots}}"  autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" current="{{currentPage}}">  <block wx:for="{{imgUrls}}">    <swiper-item>      <image src="{{item}}" class="slide-image" width="355" height="150"/>    </swiper-item>  </block></swiper><button bindtap="changeIndicatorDots" style="width:400rpx;height=50rpx;margin-top:40rpx;"> indicator-dots </button><button bindtap="changeAutoplay" style="width:400rpx;height=50rpx;margin-top:40rpx;" > autoplay </button><button bindtap="nextPage" style="width:400rpx;height=50rpx;margin-top:40rpx;" > next page </button>

index.js

Page({  data: {    imgUrls: [      'http://e.hiphotos.baidu.com/image/pic/item/2fdda3cc7cd98d107ddbc53b233fb80e7bec90a9.jpg',      'http://f.hiphotos.baidu.com/image/pic/item/58ee3d6d55fbb2fbce67ca184d4a20a44623dc68.jpg',      'http://f.hiphotos.baidu.com/image/pic/item/279759ee3d6d55fbdf1e87f969224f4a21a4dd11.jpg'    ],    indicatorDots: false,    autoplay: false,    interval: 3000,    duration: 1000,    currentPage:1  },  changeIndicatorDots: function(e) {    this.setData({      indicatorDots: !this.data.indicatorDots    })  },  changeAutoplay: function(e) {    this.setData({      autoplay: !this.data.autoplay    })  },  nextPage: function(e) {      var temp = this.data.currentPage + 1;      if (temp >= 3) {          temp = 0 ;      }    this.setData({      currentPage: temp    })  }})

0 0