摘要:本文将带你了解微信开发之view左右滑动、切换page页面的小技巧,希望本文对大家学微信有所帮助。
微信小程序开发中很多用户操作都会借鉴原生APP,众所周知原生APP中滑动切换页面,对于用户体验很好,那么使用微信小程序能不能实现呢?答案是肯定的。
首先来说说实现思路:利用touchstart、touchend事件获取用户手指滑动距离,同时监听滑动所需时间,当所需时间在一定范围内,且滑动距离够长,则算为一次成功的滑动,接下来就执行页面跳转方法。
直接上代码:
<!--index.wxml--><view class="class_first" bindtouchstart="touchStart" bindtouchend="touchEnd">
滑动切换页面</view>
//index.js var time = 0; var touchDot = 0;//触摸时的原点 var interval = ""; var flag_hd = true; Page({ onLoad: function () { var that = this }, onShow: function(){ flag_hd = true; //重新进入页面之后,可以再次执行滑动切换页面代码 clearInterval(interval); // 清除setInterval time = 0; }, // 触摸开始事件 touchStart: function (e) { touchDot = e.touches[0].pageX; // 获取触摸时的原点 // 使用js计时器记录时间 interval = setInterval(function () { time++; }, 100); }, // 触摸结束事件 touchEnd: function (e) { var touchMove = e.changedTouches[0].pageX; // 向左滑动 if (touchMove - touchDot <= -40 && time < 10 && flag_hd == true) { flag_hd = false; //执行切换页面的方法 console.log("向右滑动"); wx.navigateTo({ url: '../right/right' }) } // 向右滑动 if (touchMove - touchDot >= 40 && time < 10 && flag_hd == true) { flag_hd = false; //执行切换页面的方法 console.log("向左滑动"); wx.navigateTo({ url: '../left/left' }) } clearInterval(interval); // 清除setInterval time = 0; } }
)JS代码有点长,但是逻辑还是挺清晰的,如果看不懂,不妨新建个项目,将代码粘贴进去体验一下,只需要新建left、right页面即可,具体需求加以修改。
本文由职坐标整理并发布,希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之微信频道!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号