1. wxml ~~~ <view class="box"bindtouchstart="touchstart"bindtouchmove="touchmove"bindtouchend="touchend"> <view animation="{{animation1}}"bindtap="scrollLeft"> <image src="{{clubs[0]}}"class="img"style="width:{{img_width_one}}rpx"mode='aspectFill'/> </view> <view animation="{{animation2}}"bindtap="scrollLeft"> <image src="{{clubs[1]}}"class="img2"/> </view> <view animation="{{animation3}}"> <image src="{{clubs[2]}}"class="img3"style="width:{{img_width_three}}rpx"mode='aspectFill'/> </view> </view> ~~~ 2. js ~~~ Page({ data: { img_width_three:60, img_width_one:60, clubs: [ 'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg', 'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg', 'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg', 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1515151263767&di=7de048755c4fb6136d7937f7d6acc102&imgtype=0&src=http%3A%2F%2Fpic119.nipic.com%2Ffile%2F20161230%2F2168026_223133374033_2.jpg', 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1515151265766&di=428999ef602db706af795035e93f9ec9&imgtype=0&src=http%3A%2F%2Fpic126.nipic.com%2Ffile%2F20170402%2F4402479_111933865038_2.jpg' ] }, //觸摸開始事件 touchstart: function (e) { 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; //向左滑動 if (touchMove - touchDot <= -40 && !this.data.done) { // console.log("向左滑動"); this.data.done =true; this.scrollLeft(); } //向右滑動 if (touchMove - touchDot >=40 && !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 }) this.setData({ img_width_three: 200 }) this.animation1 = animation1; this.animation2 = animation2; this.animation3 = animation3; this.animation1.translateX(-60).opacity(0.5).step(); this.animation2.translateX(-60).opacity(1).scale(0.8,0.8).step(); this.animation3.translateX(-60).opacity(0.5).scale(1.2,1.2).step(); this.setData({ animation1: animation1.export(), animation2: animation2.export(), animation3: animation3.export(), }) var that =this; setTimeout(function () { that.animation1.translateX(0).opacity(0.5).step({ duration:0, timingFunction:'linear' }); that.animation2.translateX(0).opacity(1).scale(1,1).step({ duration:0, timingFunction:'linear' }); that.animation3.translateX(0).opacity(0.5).scale(1,1).step({ duration:0, timingFunction:'linear' }); that.setData({ animation1: animation1.export(), animation2: animation2.export(), animation3: animation3.export(), img_width_three: 60 }) }.bind(this),300) 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.setData({ img_width_one: 200 }) this.animation1 = animation1; this.animation2 = animation2; this.animation3 = animation3; this.animation1.translateX(60).opacity(0.5).scale(1.2,1.2).step(); this.animation2.translateX(60).opacity(1).step(); this.animation3.translateX(60).opacity(0.5).step(); this.setData({ animation1: animation1.export(), animation2: animation2.export(), animation3: animation3.export(), }) var that =this; setTimeout(function () { that.animation1.translateX(0).opacity(0.5).scale(1,1).step({ duration:0, timingFunction:'linear' }); that.animation2.translateX(0).opacity(1).scale(1,1).step({ duration:0, timingFunction:'linear' }); that.animation3.translateX(0).opacity(0.5).step({ duration:0, timingFunction:'linear' }); that.setData({ animation1: animation1.export(), animation2: animation2.export(), animation3: animation3.export(), img_width_one: 60 }) }.bind(this),300) let array =this.data.clubs; let pop = array.pop(); array.unshift(pop); setTimeout(function () { this.setData({ clubs: array }) }.bind(this),195) } }) ~~~ 3. wxss ~~~ /* pages/prodtype/prodType.wxss */ .box { z-index:0; white-space:nowrap; display:flex; align-items:center; justify-content:center; } .img { margin-right:15rpx; height:520rpx; } .img2 { height:600rpx; width:600rpx; } .img3 { margin-left:15rpx; height:520rpx; } .box .club:nth-child(1) { transform:scale(1,1)translateX(0rpx); opacity:0.2; z-index:10; } .box .club:nth-child(2) { transform:scale(1,1); opacity:1; z-index:100; } .box .club:nth-child(3) { transform:scale(1,1)translateX(0rpx); opacity:0.2; z-index:10; } ~~~ ~~~