微信小程序层叠轮播图

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_30648321/article/details/78983223

直接上代码 wxml

<viewclass="box"bindtouchstart="touchstart"bindtouchmove="touchmove"bindtouchend="touchend">
<viewanimation="{{animation1}}"bindtap="scrollLeft">
<imagesrc="{{clubs[0]}}"class="img"style="width:{{img_width_one}}rpx"mode='aspectFill'/>
</view>
<viewanimation="{{animation2}}"bindtap="scrollLeft">
<imagesrc="{{clubs[1]}}"class="img2"/>
</view>
<viewanimation="{{animation3}}">
<imagesrc="{{clubs[2]}}"class="img3"style="width:{{img_width_three}}rpx"mode='aspectFill'/>
</view>
</view>
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;
}
接下来就是js逻辑实现
data: {
img_width_three:60,
img_width_one:60,
clubs: [
'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.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) {
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 && !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)
}

展开阅读全文

没有更多推荐了,返回首页