本代码是实现小程序的左右滑动,点击翻书的效果,改改在H5也可以用。
效果图:
实现代码:
<image class="item_0" src="{{imageList[turnPage]}}" catchtouchstart='touchStart' catchtouchend="touchEnd"></image>
<image class="item_1" src="{{imageList[turnPage+1]}}" catchtap="ccccc"></image>
<image class="item_2" wx:if="{{ccccc}}" src="/images/fanye3.gif"></image>
js
Page({
data: {
windowWidth: wx.getSystemInfoSync().windowWidth, //单位px
windowHeight: wx.getSystemInfoSync().windowHeight, //单位px
imageList: ['https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3121243347,1466517104&fm=26&gp=0.jpg','https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3128924642,1107205623&fm=15&gp=0.jpg','https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1381219144,3184889911&fm=26&gp=0.jpg'], //图片数组
turnPage: 0,//翻转页面
},
turnNext(){
var turnPage =this.data.turnPage;
if(turnPage>=this.data.imageList.length)return
turnPage= turnPage+1
this.setData({
ccccc:true
})
setTimeout(() => {
this.setData({
ccccc:false,
turnPage
})
},700);
},
turnPre(){
var turnPage =this.data.turnPage;
if(turnPage==0)return
turnPage= turnPage-1
this.setData({
ccccc:true
})
setTimeout(() => {
this.setData({
ccccc:false,
turnPage
})
},700);
},
bindTurn(touchX) {
const that = this
const clientX = touchX
if (clientX > that.data.windowWidth / 2) {
that.turnNext()
} else {
that.turnPre()
}
},
touchStart(e) {
this.data.touchDot = e.touches[0].pageX; // 获取触摸时的原点
},
touchEnd(e) {
var that = this;
var touchMove = e.changedTouches[0].pageX;
// 向左滑动
if (touchMove - this.data.touchDot <= -40) { //执行切换页面的方法
that.turnNext()
}
// 向右滑动
else if (touchMove - this.data.touchDot >= 40){
that.turnPre()
}else{
that.bindTurn(touchMove)
}
}
})
css
/*page-turning.wxss */
.item_0 {
position: absolute;
width: 95%;
height: 95%;
z-index: 1;
left: 0%;
bottom: 0%;
}
.item_2{
position: absolute;
width: 95%;
height: 100%;
z-index: 1;
left: 0%;
top: 0%;
}
.item_1 {
position: absolute;
width: 95%;
height: 95%;
z-index: 0;
bottom: 0%;
/* overflow: hidden; */
}