小程序自定义轮播;
本来要做成旋转木马那样循环轮播,但是没思路了,本人才疏学浅,如果有大神看到可以指点一下。
欢迎 fork 指正!!!
样式展示
代码:
<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()
})
},