一、效果图
三、实例代码
1 wxml
<view class="container1" wx:if="{{page == 1}}" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd" animation="{{ani1}}">
container1
</view>
<view class="container2" wx:if="{{page == 2}}" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd" animation="{{ani2}}">
container2
</view>
2 js
const app = getApp()
var startX, endX;
var moveFlag = true;// 判断执行滑动事件
Page({
data: {
page : 1,
ani1: '',
ani2: ''
},
onLoad: function () {
},
touchStart: function (e) {
startX = e.touches[0].pageX; // 获取触摸时的原点
moveFlag = true;
},
// 触摸移动事件
touchMove: function (e) {
endX = e.touches[0].pageX; // 获取触摸时的原点
if (moveFlag) {
if (endX - startX > 50) {
console.log("move right");
this.move2right();
moveFlag = false;
}
if (startX - endX > 50) {
console.log("move left");
this.move2left();
moveFlag = false;
}
}
},
// 触摸结束事件
touchEnd: function (e) {
moveFlag = true; // 回复滑动事件
},
//向左滑动操作
move2left() {
var that = this;
if (this.data.page == 2) {
return
}
var animation = wx.createAnimation({
duration: 1000,
timingFunction: 'ease',
delay: 100
});
animation.opacity(0.2).translate(-500, 0).step()
this.setData({
ani1: animation.export()
})
setTimeout(function () {
that.setData({
page: 2,
ani2: ''
});
}, 800)
},
//向右滑动操作
move2right() {
var that = this;
if (this.data.page == 1) {
return
}
var animation = wx.createAnimation({
duration: 1000,
timingFunction: 'ease',
delay: 100
});
animation.opacity(0.2).translate(500, 0).step()
this.setData({
ani2: animation.export()
})
setTimeout(function () {
that.setData({
page: 1,
ani1: ''
});
}, 800)
}
})
3 wxss
.container1 {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 200rpx 0;
box-sizing: border-box;
background-color: rgb(224, 118, 118)
}
.container2 {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 200rpx 0;
box-sizing: border-box;
background-color: wheat
}
page{
height: 100%
}
作者:panghu33
链接:https://www.jianshu.com/p/2d03af2e8741
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。