微信小程序5分钟实现双击点击底部导航栏,页面滚到顶部(含全部代码)

1.由于是代码片段,无法以动图的形式上传至CSDN,所以以简单截图和完整代码形式展现给大家。供大家学习使用。

2.思路
受微信文档:自定义 tabBar启发,让我有一个想法:是否微信小程序也可以像微博那样,双击底部导航栏就可以实现自动滚动到当前页面顶端?

答案是肯定的。

首先,我们根据文档的介绍,tabBar的配置信息,添加tabBar 代码文件弄完后。我们首先测试如何连续点击底部导航栏,并且记录每次的点击时间,这里我们就用到了e.timeStamp,利用precentTime=e.timeStamep即可实现对时间的记录。
在这里插入图片描述

这时候我们得到时间就要考虑如何利用全局变量,把上一次的时间带到当前次来(如果不知如何利用全局变量,可以私信讨论)。此时,我们同时拿到了前一次的点击时间和当前次点击时间后相差,就得到了一个新的值。我们在这里判断当这个新的值如果小于0.3s就视为一次连续点击。

这时候我们想,如果这一次是一次连续点击,如何把次操作反馈给index.wxml呢?
我中途尝试使用跳转的办法,但一直实现不了传值。所以我用了另一种方法,创建全局变量changeNumber,如果完成一次连续点击,那么我就

  • 3
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值