实现 tabBar 单击切换初始化，双击进行页面数据刷新

叁歲伎倆 2022-11-19 07:45 389阅读 0赞

### 实现 tabBar 单击切换初始化，双击进行页面数据刷新 ###

**参考一位大佬的文章**  
我们在使用 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>

版权属于：瞭月

本文链接：[https://www.lervor.com/archives/136/][https_www.lervor.com_archives_136]

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

[https_www.lervor.com_archives_136]: https://www.lervor.com/archives/136/

发表评论取消回复

表情：

评论列表（有 0 条评论，389人围观）

还没有评论，来说两句吧...

相关阅读

相关双击锁定，单击排序的js实现

使用方法见最后的demo var CC = {}; (function() { var cSort = funct

旧城等待，/ 2024年02月17日 16:57/ 0 赞/ 83 阅读

相关微信小程序使用tabbar实现点击切换页面

tabbar具体如何使用或者具体属性，请参考：[https://developers.weixin.qq.com/miniprogram/dev/extended/weui/t

矫情吗；*/ 2023年07月22日 09:26/ 0 赞/ 17 阅读

相关为TListView实现项目单击/双击

[Delphi's][Delphi_s] TListView control displays a list of items in columns with column h

古城微笑少年丶/ 2022年12月06日 15:46/ 0 赞/ 217 阅读

相关实现 tabBar 单击切换初始化，双击进行页面数据刷新

实现 tabBar 单击切换初始化，双击进行页面数据刷新参考一位大佬的文章我们在使用 uni-app 开发前端时，如果应用是一个多 tab 应用，可以通过使用官方

叁歲伎倆/ 2022年11月19日 07:45/ 0 赞/ 390 阅读

相关 js实现单击事件和双击事件

一下代码可以解决单击事件和双击事件冲突的问题 //单击事件 var timeoutID = null; $("test).on('click',functi

雨点打透心脏的1/2处/ 2022年11月14日 10:16/ 0 赞/ 214 阅读

相关点击tabbar刷新页面

.h文件 import <UIKit/UIKit.h> @interface TabbarRootViewController : UITabBarCo

傷城~/ 2022年08月22日 13:26/ 0 赞/ 222 阅读

相关微信小程序关于tabbar点击切换数据不刷新问题

微信小程序中经常遇到的需求就是我提交了一个表单或者进行了一个操作，需要在我的个人中心页面中实时显示出来，但是小程序中的tabbar切换类似于tab切换并不会进行页面刷新请求

秒速五厘米/ 2021年10月24日 05:28/ 0 赞/ 603 阅读

相关 uni-app双击事件（单击、双击互不干扰）

uni-app中绑定双击事件 > 功能需求在uni-app中，很多时候我们需要元素绑定双击事件，比如自定义的视频播放器，双击播放、暂停，但是显示进度条、隐藏进度条。

╰+哭是因爲堅強的太久メ/ 2021年10月06日 18:52/ 0 赞/ 1340 阅读

相关 uniapp之tabBar/页面切换

1.uniapp目录结构 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6L

╰半夏微凉°/ 2021年09月13日 15:24/ 0 赞/ 5377 阅读

相关 uni-app 中 tabBar 点击或单击事件说明以及双击事件模拟

我们在使用 uni-app 开发前端时，如果应用是一个多 tab 应用，可以通过使用官方提供的原生 tabBar 来实现页面导航。那么如果我们要实现 tabBar 单击切...

朱雀/ 2021年03月23日 09:59/ 2 赞/ 6396 阅读