APP常常可以看到双击底部的某个menu,页面就会刷新。这是一种常见的操作。但如果开发者使用uniapp或者小程序,会发现,底部的tabbar是在page.json文件中配置的,但官方的api只提供了单击事件的监听,双击事件是没有的。当然有些人可能会用第三方ui框架来代替默认的导航,但实际上从性能来讲,还是默认的比较好,所以既然选择默认的tabbar,那怎么去展示出双击tabbar这个操作呢?原理简单:
在官方给的监听点击tabar的事件中做个操作,即在某个事件段内没有第二次点击,就当做是单击,一般时间设置为200ms,比较符合用户双击事件的时间。
代码如下:
onTabItemTap(e) { // tab 点击时执行,此处直接接收单击事件
if (this.tabClick) {
// 200ms 内再次点击 数据处理
this.reflesh() //数据处理
}
this.tabClick = true
setTimeout(() => {
this.tabClick = false // 200ms 内没有第二次点击,就当作单击
}, 200)
},
当然还有其他思路,但原理基本都是在一定的时间的间隔去执行不同的事件,这样便可处理单击,双击以及多次点击的事件。
网友评论