一、效果图
b292772b497159defa23f93179f8f819.gif
二、扫码体验
gh_e0c4ed81900d_258.jpg
三、实例代码
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%
}
四、说明
- 滑动切换页面是根据判断用户在屏幕上的左右滑动操作，然后通过显示和隐藏view实现。
2.动画
（1）创建动画实例
var animation = wx.createAnimation({
duration: 1000, //动画时长
timingFunction: 'ease', //动画的效果
delay: 100 //动画延迟时间，单位 ms
});
（2）动画的动作
animation.opacity(0.2).translate(-500, 0).step()
//opacity动画的透明， 范围：0-1
//translate(number tx, number ty) tx 横向移动，单位 px； ty 纵向移动，单位 px；
（3）将动画绑定到元素
this.setData({
ani1: animation.export()
})
网友评论