我们在使用 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、微信小程序、支付宝小程序测试通过,其他平台未进行测试。