每日一记:支付宝小程序通过左右滑动屏幕进行切换页面
目前很多手机app都支持左右滑动屏幕进行切换页面,提升了用户体验,有其是大屏手机,要点击左上角的返回按键确实有点辛苦!这里以支付宝小程序为例,演示如何在小程序中实现上述效果。废话不多说,直接上干货:1、在.axml文件的最外层视图容器view(你也可以选择自己合适的部位)中添加开始和结束事件<view class="page-todos" onTouchStart="Tou...
·
目前很多手机app都支持左右滑动屏幕进行切换页面,提升了用户体验,有其是大屏手机,要点击左上角的返回按键确实有点辛苦!
这里以支付宝小程序为例,演示如何在小程序中实现上述效果。
废话不多说,直接上干货:
1、在.axml文件的最外层视图容器view(你也可以选择自己合适的部位)中添加开始和结束事件
<view class="page-todos" onTouchStart="TouchStart" onTouchEnd="TouchEnd">
<view>试试左右滑动切换更方便哦!</view>
</view>
注意:不同小程序中的事件名称不一定相同,请自行查阅小程序开发文档。
2、在.js文件中添加对应的事件动作
/**TouchStart方法开始*/
TouchStart(e) {
this.setData({
"touch.x": e.changedTouches[0].clientX,
"touch.y": e.changedTouches[0].clientY
});
},
/**TouchStart方法结束*/
/**TouchEnd方法开始*/
TouchEnd(e) {
let x = e.changedTouches[0].clientX;
let y = e.changedTouches[0].clientY;
let turn = this.getTouchData(x, y, this.data.touch.x, this.data.touch.y);
if(turn == "right"){
//返回上一个页面
my.navigateBack();
}else if(turn == "left"){
//跳转到指定页面
my.navigateTo({ url: '../add-todo/add-todo' });
}else{
}
},
/**TouchEnd方法结束*/
/**getTouchData方法开始*/
/***
* 判断用户滑动
* 左滑还是右滑
*/
getTouchData(endX, endY, startX, startY){
let turn = "";
if (endX - startX > 50 && Math.abs(endY - startY) < 50) { //右滑
turn = "right";
} else if (endX - startX < -50 && Math.abs(endY - startY) < 50) { //左滑
turn = "left";
}
return turn;
},
/**getTouchData方法结束*/
说明:上述方法的逻辑简单易懂,详细大家都可以理解,如果有疑惑地,欢迎留意讨论。
更多推荐
已为社区贡献2条内容
所有评论(0)