swiper
小程序自定義輪播; 樣式展示
代碼: <view class="show_swiper" style='width: {{winWidth}}px;height: {{winHeight}}px;'> <view class='show_swiper_list' bindtouchstart='swiperTouchstart' bindtouchmove='swiperTouchmove' bindtouchend='swiperTouchend' style='width: {{allWidth}}px;position: relative;left: {{(winWidth-itemWidth)/2}}px;'> <block wx:for="{{swiperList}}"> <view class='swiper_item' data-curid="{{curIndex}}" data-index='{{index}}' animation="{{curIndex == index? animationToLarge : animationToSmall}}" style='width: {{itemWidth}}px;height: {{itemWidth*1.4}}px;transform: scale({{curIndex == index ? 1 : scale}});-'> {{item}} </view> </block> </view> </view> 主要事件; //觸摸開始的事件 swiperTouchstart: function (e) { // console.log('touchstart',e); let startClinetX = e.changedTouches[0].clientX; this.setData({ startClinetX: startClinetX, //觸摸開始位置; startTimestamp: e.timeStamp, //觸摸開始時間; }) }, //觸摸移動中的事件 swiperTouchmove: function (e) { // console.log('touchmove',e); }, //觸摸結束事件 swiperTouchend: function (e) { // console.log("觸摸結束",e); let times = e.timeStamp - this.data.startTimestamp, //時間間隔; distance = e.changedTouches[0].clientX - this.data.startClinetX; //距離間隔; //判斷 if (times < 500 && Math.abs(distance) > 10) { let curIndex = this.data.curIndex; let x0 = this.data.itemWidth,x1 = this.data.translateDistance,x = 0; if ( distance > 0) { curIndex = curIndex - 1 if(curIndex < 0){ curIndex = 0; x0 = 0; } x = x1 + x0; } else { // console.log('+1',x); curIndex = curIndex + 1 if (curIndex >= this.data.swiperList.length) { curIndex = this.data.swiperList.length-1; x0 = 0; } x = x1 - x0; } this.animationToLarge(curIndex, x); this.animationToSmall(curIndex, x); this.setData({ curIndex: curIndex, translateDistance: x }) } else { } }, // 動畫 animationToLarge: function (curIndex,x) { this.animation.translateX(x).scale(1).step() this.setData({ animationToLarge: this.animation.export() }) }, animationToSmall: function (curIndex,x) { this.animation.translateX(x).scale(0.7).step() this.setData({ animationToSmall: this.animation.export() }) }, |