我们在使用 uni-app 开发前端时,如果应用是一个多 tab 应用,可以通过使用官方提供的原生 tabBar 来实现页面导航。那么如果我们要实现 tabBar 单击切换初始化,双击进行页面数据刷新,应该如何实现呢?
官方在 tabBar 接口文档说没有过多说明,通过查找文档,在 页面生命周期 中发现了相关说明。具体代码如下:
<script>
export default {
onTabItemTap(e) {
// tab 点击时执行,此处直接接收单击事件
console.log(e)
},
onLoad(option) {
}
}
</script>
官方没有提供双击事件,我们只能通过程序模拟双击事件。修改上面的代码为:
<script>
export default {
data() {
return {
tabClick: false // true 表示是两次点击中的第一次点了 tabBar
}
},
onTabItemTap(e) {
// tab 点击时执行,此处直接接收单击事件
console.log(e)
if (this.tabClick) { // 200ms 内再次点击
// 这里就是模拟的双击事件,可以写类似数据刷新相关处理
}
this.tabClick = true
setTimeout(() => {
this.tabClick = false // 200ms 内没有第二次点击,就当作单击
}, 200)
},
onLoad(option) {
}
}
</script>
仅对 H5、微信小程序、支付宝小程序测试通过,其他平台未进行测试。
版权属于:瞭月
本文链接:https://www.lervor.com/archives/136/
版权声明:本文为瞭月原创文章,转载请附上原文出处链接和本声明。