我们在使用 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/

版权声明：本文为瞭月原创文章，转载请附上原文出处链接和本声明。

© 允许规范转载
如果觉得我的文章对你有用，请点个赞