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

朱雀 2021-03-23 09:59 6377阅读 2赞

我们在使用 uni-app 开发前端时，如果应用是一个多 tab 应用，可以通过使用官方提供的原生 tabBar 来实现页面导航。那么如果我们要实现 tabBar 单击切换初始化，双击进行页面数据刷新，应该如何实现呢？

官方在 tabBar 接口文档说没有过多说明，通过查找文档，在 [页面生命周期](https://uniapp.dcloud.io/collocation/frame/lifecycle?id=页面生命周期) 中发现了相关说明。具体代码如下：

```javascript
<script>
    export default {
        onTabItemTap(e) {
            // tab 点击时执行，此处直接接收单击事件
            console.log(e)
        },
        onLoad(option) {
        }
    }
</script>
```

官方没有提供双击事件，我们只能通过程序模拟双击事件。修改上面的代码为：

```javascript
<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>
```

发表评论取消回复

表情：

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

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

相关阅读

相关单击事件和双击事件同时存在的处理办法

原始的ondblclick方法在执行完两次onclick方法后执行。所以，如果用该方法，则在click事件中要判断是否是因为双击事件触发的，一般的方法通过setTimeou

悠悠/ 2024年02月17日 16:52/ 0 赞/ 18 阅读

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

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

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

相关 Android 模拟用户点击事件

一、源码查看 / Call this view's OnClickListener, if it is defined. Performs all normal

谁借莪１个温暖的怀抱￠/ 2022年11月12日 04:15/ 0 赞/ 223 阅读

相关 java jtabel双击_swing-JTable中单行的点击或双击事件

table 的属性设置 private JTable getPreTable() \{ if (preTable == null) \{ preTable = new J

青旅半醒/ 2022年11月03日 04:29/ 0 赞/ 391 阅读

相关 html 记录点击次数,jquery/js记录点击事件，单击次数加一，双击清零

目的：点击按钮，点击后在网页上显示点击次数，双击清零实现：js或者jquery 代码如下: pageEncoding="utf-8"%> 点击事件 window.o

古城微笑少年丶/ 2022年10月11日 15:56/ 0 赞/ 228 阅读

相关点击事件

javascript教程 function displayDate()\{ document.getElementById("demo").inner

朴灿烈づ我的快乐病毒、/ 2022年06月08日 02:07/ 0 赞/ 328 阅读

相关 Vue 框架-02-事件：点击, 双击事件,鼠标移上事件

Vue 框架-02-事件：点击, 双击事件,鼠标移上事件 1.单击事件：v-on:click ![20181107153425544.gif][] 源码 app2

朴灿烈づ我的快乐病毒、/ 2022年04月18日 02:58/ 0 赞/ 369 阅读

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

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

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

相关鼠标移入移出双击单击事件

qq交流群： 581478349 <!DOCTYPE html> <html> <head>

- 日理万妓/ 2021年09月18日 14:44/ 0 赞/ 425 阅读

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

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

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