簡(jiǎn)介

1.利用touch事件判斷左滑右滑

2.左滑(下一張)時(shí),刪除卡片集合第一項(xiàng)(當(dāng)前頁(yè)),并將刪除的內(nèi)容放到卡片集合末尾,添加相應(yīng)動(dòng)畫過(guò)度

3.右滑(上一張)時(shí),刪除卡片集合末尾項(xiàng)(最后一頁(yè)),并將刪除的內(nèi)容放到卡片集合第一項(xiàng),添加相應(yīng)動(dòng)畫過(guò)度

4.判斷是否滑到最后一張(第一張),給出提示

效果圖

1.gif

wxml

{{item.name}}

js

//index.js

//獲取應(yīng)用實(shí)例

const app = getApp()

Page({

data: {

nowPgae:1,

startX:0,

slider:false,

animationData:{},

cardInfoList: [{ name: 1}, { name: 2}, { name: 3}, { name: 4}]

},

touchstart(e){

this.setData({

startX: e.changedTouches[0].clientX,

})

},

touchend(e) {

let that=this;

let startX = this.data.startX;

let endX = e.changedTouches[0].clientX;

if (this.data.slider)return;

// 下一頁(yè)(左滑距離大于30)

if (startX - endX > 30){

this.setData({

slider: true

});

//尾頁(yè)(當(dāng)前頁(yè) 等于 總頁(yè)數(shù))

if (this.data.nowPgae == this.data.cardInfoList.length){

this.setData({

slider: false

});

wx.showToast({title: '已經(jīng)是最后一張了',icon:'none'});

return;

};

//創(chuàng)建動(dòng)畫 5s將位置移動(dòng)到-150%,-150%

let animation = wx.createAnimation({

duration: 500,

});

animation.translateX('-150%').translateY('-150%').rotate(60).step();

this.setData({

animationData: animation.export()

});

// 移動(dòng)完成后

setTimeout(function(){

var cardInfoList = that.data.cardInfoList;

var slidethis = that.data.cardInfoList.shift(); //刪除數(shù)組第一項(xiàng)

that.data.cardInfoList.push(slidethis); //將第一項(xiàng)放到末尾

//創(chuàng)建動(dòng)畫 將位置歸位

let animation = wx.createAnimation({

duration: 0,

});

animation.translateX('-53%').translateY('-50%').rotate(0).step();

that.setData({

cardInfoList: that.data.cardInfoList,

animationData: animation.export(),

slider:false,

nowPgae:that.data.nowPgae+1

});

},500)

}

// 上一頁(yè)

if (endX-startX > 30){

this.setData({

slider: true

})

//首頁(yè)

if (this.data.nowPgae == 1) {

this.setData({

slider: false

})

wx.showToast({title: '已經(jīng)到第一張了',icon: 'none'})

return;

};

//創(chuàng)建動(dòng)畫 移動(dòng)到-150%,-150%

let animation = wx.createAnimation({

duration: 0,

});

animation.translateX('-150%').translateY('-150%').rotate(100).step();

var cardInfoList = that.data.cardInfoList;

var slidethis = that.data.cardInfoList.pop(); //刪除數(shù)組末尾項(xiàng)

that.data.cardInfoList.unshift(slidethis);//將刪除的末尾項(xiàng)放到第一項(xiàng)

that.setData({

animationData: animation.export(),

cardInfoList: that.data.cardInfoList,

});

setTimeout(function(){

//創(chuàng)建動(dòng)畫 5s將位置移動(dòng)到原位

let animation2 = wx.createAnimation({

duration: 500,

// timingFunction: 'cubic-bezier(.8,.1,.2,0.8)',

});

animation2.translateX('-53%').translateY('-50%').rotate(0).step();

that.setData({

animationData: animation2.export()

});

that.setData({

slider: false,

nowPgae: that.data.nowPgae - 1

});

},50)

}

},

onLoad: function() {},

})

wxss

page {

height: 100%;

}

.container {

height: 100%;

}

.card_wrap {

position: relative;

width: 100%;

height: 100%;

background: #f2f2f6;

}

.card_wrap .card_item {

position: absolute;

width: 80%;

height: 85%;

top: 50%;

left: 50%;

transform: translateX(-50%) translateY(-50%);

padding: 30rpx;

background: #fff;

border: 2rpx solid #eee;

border-radius: 20rpx;

box-shadow: 2px 2px 0px 0px rgba(0, 0, 5, 1);

}

.card_item:nth-child(1) {

z-index: 4;

transform: translateX(-53%) translateY(-50%);

}

.card_item:nth-child(2) {

z-index: 3;

transform: translateX(-53%) translateY(-50%);

}

.card_item:nth-child(3) {

z-index: 2;

transform: translateX(-50%) translateY(-51%);

}

.card_item:nth-child(4) {

z-index: 1;

transform: translateX(-47%) translateY(-52%);

}

.card-container {

width: 100%;

height: 100%;

}

總結(jié)

以上是生活随笔為你收集整理的html5微信滑动翻页效果,微信小程序翻页效果的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。