tran index scroll false ges als -a ndt -s

話不多說，上圖上代碼。

wxml

<view style="white-space: nowrap;" class="box" bindtouchstart="touchstart" bindtouchmove="touchmove" bindtouchend="touchend"> <view class="club" animation="{{animation1}}" bindtap="scrollLeft"> <image src="http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg"/> <text>{{clubs[0].name}}</text> </view> <view class="club" animation="{{animation2}}" bindtap="scrollLeft"> <image src="http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg"/> <text>{{clubs[1].name}}</text> </view> <view class="club" animation="{{animation3}}"> <image src="http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg"/> <text>{{clubs[2].name}}</text> </view> <view class="club" animation="{{animation4}}" bindtap="scrollRight"> <image src="http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg"/> <text>{{clubs[3].name}}</text> </view> <view class="club" animation="{{animation5}}" bindtap="scrollRight"> <image src="http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg"/> <text>{{clubs[4].name}}</text> </view> </view> wxss

.box { height: 340rpx; z-index: 0; margin: 50rpx 0; } .box .club { height: 140rpx; width: 140rpx; position: relative; display: inline-block; } .club image { height: 140rpx; width: 140rpx; } .club text { display: block; width: 100%; font-size: 24rpx; line-height: 40rpx; text-align: center; } .box .club:nth-child(1) { transform: scale(0.8, 0.8) translateX(-120rpx); opacity: 0.2; z-index: 10; } .box .club:nth-child(2) { transform: scale(1,1) translateX(-80rpx); opacity: 0.5; z-index: 100; } .box .club:nth-child(3) { transform: scale(1.4,1.4); z-index: 1000; } .box .club:nth-child(4) { transform: scale(1,1) translateX(80rpx); opacity: 0.5; z-index: 100; } .box .club:nth-child(5) { transform: scale(0.8, 0.8) translateX(120rpx); opacity: 0.2; z-index: 10; } .box .club:nth-child(1) text, .box .club:nth-child(2) text, .box .club:nth-child(4) text, .box .club:nth-child(5) text{ visibility: hidden; } js

//觸摸開始事件 touchstart: function (e) { console.log(e.touches[0].pageX); this.data.touchDot = e.touches[0].pageX; var that = this; this.data.interval = setInterval(function () { that.data.time += 1; }, 100); }, //觸摸移動事件 touchmove: function (e) { let touchMove = e.touches[0].pageX; let touchDot = this.data.touchDot; let time = this.data.time; console.log("touchMove: " + touchMove + ", touchDot: " + touchDot + ", diff: " + (touchMove - touchDot)); //向左滑動 if (touchMove - touchDot <= -40 && time < 10 && !this.data.done) { console.log("向左滑動"); this.data.done = true; this.scrollLeft(); } //向右滑動 if (touchMove - touchDot >= 40 && time < 10 && !this.data.done) { console.log("向右滑動"); this.data.done = true; this.scrollRight(); } }, //觸摸結束事件 touchend: function (e) { clearInterval(this.data.interval); this.data.time = 0; this.data.done = false; }, scrollLeft() { var animation1 = wx.createAnimation({ duration: 300, timingFunction: "linear", delay: 0 }) var animation2 = wx.createAnimation({ duration: 300, timingFunction: "linear", delay: 0 }) var animation3 = wx.createAnimation({ duration: 300, timingFunction: "linear", delay: 0 }) var animation4 = wx.createAnimation({ duration: 300, timingFunction: "linear", delay: 0 }) var animation5 = wx.createAnimation({ duration: 300, timingFunction: "linear", delay: 0 })
this.animation1 = animation1; this.animation2 = animation2; this.animation3 = animation3; this.animation4 = animation4; this.animation5 = animation5;
this.animation1.translateX(-60).opacity(0).step(); this.animation2.translateX(-140).opacity(0.5).scale(0.8, 0.8).step(); this.animation3.translateX(-110).opacity(0.5).scale(1, 1).step(); this.animation4.translateX(-70).opacity(1).scale(1.4, 1.4).step(); this.animation5.translateX(-30).opacity(0.5).scale(1, 1).step();

this.setData({ animation1: animation1.export(), animation2: animation2.export(), animation3: animation3.export(), animation4: animation4.export(), animation5: animation5.export() })
var that = this; setTimeout(function () { that.animation1.translateX(-50).opacity(0.2).scale(0.8, 0.8).step({ duration: 0, timingFunction: ‘linear‘ }); that.animation2.translateX(-40).opacity(0.5).scale(1, 1).step({ duration: 0, timingFunction: ‘linear‘ }); that.animation3.translateX(0).opacity(1).scale(1.4, 1.4).step({ duration: 0, timingFunction: ‘linear‘ }); that.animation4.translateX(40).opacity(0.5).scale(1, 1).step({ duration: 0, timingFunction: ‘linear‘ }); that.animation5.translateX(50).opacity(0.2).scale(0.8, 0.8).step({ duration: 0, timingFunction: ‘linear‘ }); that.setData({ animation1: animation1.export(), animation2: animation2.export(), animation3: animation3.export(), animation4: animation4.export(), animation5: animation5.export() }) }.bind(this), 195)
let array = this.data.clubs; let shift = array.shift(); array.push(shift);
setTimeout(function () { this.setData({ clubs: array }) }.bind(this), 195) },
//向右滑動事件 scrollRight() { var animation1 = wx.createAnimation({ duration: 300, timingFunction: "linear", delay: 0 }) var animation2 = wx.createAnimation({ duration: 300, timingFunction: "linear", delay: 0 }) var animation3 = wx.createAnimation({ duration: 300, timingFunction: "linear", delay: 0 }) var animation4 = wx.createAnimation({ duration: 300, timingFunction: "linear", delay: 0 }) var animation5 = wx.createAnimation({ duration: 300, timingFunction: "linear", delay: 0 })
this.animation1 = animation1; this.animation2 = animation2; this.animation3 = animation3; this.animation4 = animation4; this.animation5 = animation5;
this.animation1.translateX(30).opacity(0.5).scale(1, 1).step(); this.animation2.translateX(70).opacity(1).scale(1.4, 1.4).step(); this.animation3.translateX(110).opacity(0.5).scale(1, 1).step(); this.animation4.translateX(120).opacity(0.2).scale(0.8, 0.8).step(); this.animation5.translateX(130).opacity(0).step();

this.setData({ animation1: animation1.export(), animation2: animation2.export(), animation3: animation3.export(), animation4: animation4.export(), animation5: animation5.export() })
var that = this; setTimeout(function () { that.animation1.translateX(-50).opacity(0.2).scale(0.8, 0.8).step({ duration: 0, timingFunction: ‘linear‘ }); that.animation2.translateX(-40).opacity(0.5).scale(1, 1).step({ duration: 0, timingFunction: ‘linear‘ }); that.animation3.translateX(0).opacity(1).scale(1.4, 1.4).step({ duration: 0, timingFunction: ‘linear‘ }); that.animation4.translateX(40).opacity(0.5).scale(1, 1).step({ duration: 0, timingFunction: ‘linear‘ }); that.animation5.translateX(50).opacity(0.2).scale(0.8, 0.8).step({ duration: 0, timingFunction: ‘linear‘ }); that.setData({ animation1: animation1.export(), animation2: animation2.export(), animation3: animation3.export(), animation4: animation4.export(), animation5: animation5.export() }) }.bind(this), 195)
let array = this.data.clubs; let pop = array.pop(); array.unshift(pop);
setTimeout(function () { this.setData({ clubs: array }) }.bind(this), 195) } 復制完我還有幾句話要說，做前端千萬不要被框架限制住自己，要做一個有靈魂的工程師。就像這個輪播圖千萬不要被小程序的swiper所限制。

小程序自定義輪播圖