uniapp——一键回到顶部（双击事件）

耶啵奶膘

于 2024-08-05 14:24:00 发布

阅读量384

点赞数 3

分类专栏： uni、vue 文章标签： uni-app

本文链接：https://blog.csdn.net/xulihua_75/article/details/140925946

版权

uni、vue 专栏收录该内容

133 篇文章 7 订阅

订阅专栏

点击顶部自定义导航栏，回到顶部

<view class="navBox" @click="backTop">
	<wh-nav-bar title="朋友圈"
		background="linear-gradient(to right, #D3D5F0, #F0DCF3, #F7F6FB, #DAE8F2, #E1D3EE)" color="#000000"
		@init="onInit"></wh-nav-bar>
</view>

function backTop(){
	uni.pageScrollTo({
		scrollTop:0,
		duration:3000
	})
}

判定双击事件

https://juejin.cn/post/7229861468660039717

关注博主即可阅读全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

耶啵奶膘

关注关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
uniapp——一键回到顶部（双击事件）

uniapp——一键回到顶部（双击事件）
复制链接

扫一扫

专栏目录

响应单击双击事件监听

12-24

开发中遇到和该博主一样的问题http://bbs.csdn.net/topics/391079435，如何响应双击、单击事件，于是找到这篇博文：http://blog.csdn.net/jdsjlzx/article/details/7814322，拿来主义直接写个dmeo，顺利跑起来

uniapp点击返回顶部

Wen_Tao98的博客

05-18

810

uniapp点击返回顶部 <template> <view class="box">  <image src="图片" class="back_yuan" mode="" v-if="back" @tap="backtop"></image> </view> </template> <script> export default { data() { return .

参与评论您还未登录，请先登录后发表或查看评论

回到顶部功能：uniapp微信小程序回到顶部的几种方法

南北极之间

05-23

3997

回到顶部功能：uniapp微信小程序回到顶部的几种方法

uniapp实现回到顶部功能

热门推荐

Tianxiaoxixi的博客

06-13

1万+

uniapp中的返回顶部

uniapp页面回到顶部方法

topuu的博客

02-21

7213

uniapp页面回顶

uni-app回到顶部

weixin_58860246的博客

11-10

954

2.用户滚动到固定位置到顶部的距离显示 //v-show="key"js代码 //位置距离大于x的时候显示。

uni-app 小程序双击事件

yuwenwenwenwenyu的博客

01-29

4270

uni-app 小程序双击事目前uni-app view标签不支持双击事件，下面自定义双击事件： // A code block <view @click="handClick(index)"></view> data(){ return { lastTapTimeoutFunc:null, lastTapDiffTime:0 } }, methods:{ // 单击或双击 handClick(index) { let _this = this; l

单击和双击事件的冲突处理示例代码

09-04

主要介绍了单击和双击事件的冲突处理方法,需要的朋友可以参考下

Android实现双击TitleBar回顶部的功能示例代码

08-29

当双击事件被触发时，它会调用`backToContentTop()`方法，这个方法需要在使用监听器的Activity中实现，以便将列表滚动到顶部。接下来，我们需要在Activity中初始化TitleBar并设置监听器： ```java public class ...

系统垃圾清理工具 ——一键清理系统垃圾

12-22

一键清理系统垃圾，安全可靠，速度快，无需安装，直接双击运行，以cmd行试运行

android单击、双击事件

07-21

安卓控件单击、双击事件共存，下载附件运行即可

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

qq_44046765的博客

03-09

9808

uni-app中绑定双击事件功能需求在uni-app中，很多时候我们需要元素绑定双击事件，比如自定义的视频播放器，双击播放、暂停，但是显示进度条、隐藏进度条。但是在uni-app官方并没有提供双击事件，那么就需要我们自己来实现双击事件的逻辑。在双击的时候不能触发单击事件，在单击的时候不能触发双击事件。在做双击事件的时候，大多数情况下就是使用时间戳来实现，两次点击的时间差小于某一个值是判定为双击事件，否则判定为单击事件。代码实现下面展示一下我的实现的代码。 //html部分 <vie

uniapp 事件单击双击多次点击及滑动

qq_55995331的博客

02-21

2294

uniapp 事件单击双击多次点击及滑动。

uni-app中返回顶部的方法

weixin_46511008的博客

08-10

4856

uni-app中返回顶部的方法

【uni-app】模拟双击事件

可耐特

03-20

858

监听用户第一次点击屏幕时间与第二次点击屏幕的时间差。点击第二次时时间清空重新计算。

【uniapp 返回顶部】

前端-CV全粘工程师

08-11

1127

将页面滚动到目标位置。

uniapp 双击事件

09-22

在uni-app中，可以通过两种方式来实现双击事件。方式一：使用自定义指令 1. 在`main.js`文件中注册自定义指令： ```javascript import Vue from 'vue' Vue.directive('doubletap', { bind: function (el, binding) { let touchStartTime = 0 el.addEventListener('touchstart', function (event) { if (event.touches.length !== 1) return if (touchStartTime === 0) { touchStartTime = Date.now() } else { if (Date.now() - touchStartTime < 300) { binding.value(event) } touchStartTime = 0 } }) } }) ``` 2. 在需要使用双击事件的元素上，使用`v-doubletap`指令，并传入相应的处理函数： ```html <template> <div> <div v-doubletap="handleDoubleTap">双击我触发双击事件</div> </div> </template> <script> export default { methods: { handleDoubleTap(event) { // 在这里处理双击事件 console.log('双击事件发生') } } } </script> ``` 方式二：使用自定义组件 1. 创建一个名为`DoubleTap`的自定义组件： ```html <template> <div @click="handleClick"> <slot></slot> </div> </template> <script> export default { data() { return { lastClickTime: 0 } }, methods: { handleClick() { const currentTime = new Date().getTime() if (currentTime - this.lastClickTime < 300) { this.$emit('doubletap') } this.lastClickTime = currentTime } } } </script> ``` 2. 在需要使用双击事件的地方，使用`DoubleTap`组件，并监听`doubletap`事件： ```html <template> <div> <DoubleTap @doubletap="handleDoubleTap"> 双击我触发双击事件 </DoubleTap> </div> </template> <script> import DoubleTap from '@/components/DoubleTap' export default { components: { DoubleTap }, methods: { handleDoubleTap() { // 在这里处理双击事件 console.log('双击事件发生') } } } </script> ```

uniapp——一键回到顶部（双击事件）

点击顶部自定义导航栏 ，回到顶部

判定双击事件

点击顶部自定义导航栏，回到顶部