swiper - 小程序 自定义轮播 类旋转木马（swiper禁止手动滑动）

swiper - 小程序 自定义轮播 类旋转木马（swiper禁止手动滑动）

swiper

小程序自定义轮播; 本来要做成旋转木马那样循环轮播，但是没思路了，本人才疏学浅，如果有大神看到可以指点一下。 欢迎 fork 指正！！！

样式展示

代码：

{{item}}

主要事件；

//触摸开始的事件 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() }) },

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。