uni-app scroll-view的滑动事件与子项列表的长按事件的冲突解决

最新推荐文章于 2025-04-18 21:27:43 发布

jyy_99

最新推荐文章于 2025-04-18 21:27:43 发布

阅读量3k

点赞数 4

文章标签： uni-app

本文链接：https://blog.youkuaiyun.com/jyy_99/article/details/113850907

版权

本文分享了在uni-app中遇到的scroll-view与子view长按事件冲突问题，通过添加touchstart、touchmove和longpress事件及位置判断，避免了滑动时误触发长按。欢迎交流改进方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这几天又学习了新的技术，uni-app支持多平台的框架，实现功能的时候发现scroll-view的滑动事件会和子项的长按事件冲突

找了一个不太好的方法，结果浪费了好多时间，

现在发现view有一个touchmove事件（scroll-view的子项是用view包裹的），当我按住某一个view滑动scroll-view的时候，会触发view 的长按事件

解决方法如下：

在子项view上添加@touchstart，@touchmove，@longpress事件，用来支持长按事件

添加如下属性

在itemTouchstart中记录触屏的位置

然后在itemTouchmove中判断是否在移动，是移动的话，不响应长按事件

下面是长按事件

如果大家发现我说的有问题，或者有更好的方法，欢迎大家在评论里提出来，互相学习，嘻嘻

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

jyy_99

关注关注

4
点赞
踩
6

收藏

觉得还不错? 一键收藏
3
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

ScrollView嵌套ScrollView时的滑动冲突问题（同向滑动）

yeaper_yeo的博客

03-11

8490

当ScrollView内部再嵌套另一个ScrollView时，就会出现滑动冲突问题，经常看到的就是，内部滑动失效。通过对事件分发机制的了解 dispatchTouchEvent：负责事件的分发onInterceptTouchEvent：判断是否拦截某个事件onTouchEvent：消费点击事件事件传递遵循的顺序：Activity->Window->DecorV

uni-app导航栏+swiper，及处理滑动冲突

qq_26288475的博客

10-21

815

第一部分：swiper + 顶部/底部导航栏实现这里的思想与安卓的fragment+viewpager是很类似的，用swiper作为左右滚动区间，联动tab导航栏，中间展示内容组件化整体布局导航栏部分大家可以自定义，我整个界面采用的是底部导航栏用position:fixed浮动，swiper部分的current注意是与tab的下标一致，并且注意swiper的高度一定要动态自适应，这个等下...

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

uniapp 点击，长按，触摸，结束触摸事件

最新发布

梨木乔

04-18

1173

前端：uniapp框架中<scroll-view>r如何控制元素进行局部滚动

Web前端之UniApp解决滚动冲突问题、自定义tabBar、动态组件

优快云博客主页地址：https://mengjian.blog.youkuaiyun.com/

04-12

2264

Web前端之UniApp解决滚动冲突问题、自定义tabBar、动态组件

uni-app 长按事件无法被页面滚动或滑动阻止问题解决

chenyu-max

12-03

3108

问题描述 uni-app 中长按事件使用的是 @longpress或者 @longtap 需要触发该事件的 element 位于一个能够上下滚动的页面中长按的元素在长按期间有页面滚动或者页面滑动时不触发长按解决 @longpress或者 @longtap这两个事件的触发时间是在 350ms 查阅了一些资料，发现无法更改这两个事件的触发时间所以我们希望在长按触发前如果有页面滑动或者滚动时阻止长按触发有这么一个事件 @touchmove 其功能描述如下手指触摸后移动解决代码 <te

自定义 View 嵌套 ScrollView 产生滑动冲突的解决方案

你若盛开，蜜蜂自来

08-17

1万+

主声明：转载请在开头附加本文链接及作者信息，并标记为转载。本文由博主威威喵原创，请多支持与指教。本文首发于此博主：威威喵|博客主页：https://blog.youkuaiyun.com/smile_running 自定义ViewGroup的时候，你一定会遇到这种情况——滑动冲突。发生这种情况的前提是你的自定义ViewGroup支持滚动，并且可能也内嵌了一个可以支持滚动...

【uniapp】小程序开发8：滚动组件scroll-view

不积跬步无以至千里，不积小流无以成江海。一个喜欢学习分享的程序员

12-11

7203

我们经常需要做页面中部分内容可以滚动的功能，例如“猜你喜欢”，内容太多，通常都会超出屏幕，那么此块区域应该可以滚动，但是顶部的自定义导航栏应该不能随着滚动。这个时候，就可以使用uniapp提供的滚动组件scroll-view。

picker-view横向滚动

03-23

另一个思路是，完全自定义滚动效果，使用scroll-view横向布局，然后通过touch事件监听滑动，动态调整内容的位置。这样需要自己处理滚动逻辑和选中状态的判断，但可以实现横向效果。引用[3]中的案例就是类似的做法，...

uniapp手机视频swiper滚动展示不全

03-21

有时会将 `scroll-view` 或其他可滚动容器与 `swiper` 结合使用以增强交互体验。但如果两者存在嵌套关系，可能引发触摸事件捕获错误或者滚动行为失效的情况。此时需注意以下几点： - 明确区分外层 `scroll-view` 和...

uniapp解决长按事件与点击事件冲突问题

残阳曦月

04-21

1561

直接贴代码Demo,粘贴到页面直接可以测,按需求写入方法即可

View的滑动冲突处理方案

11-20

View的滑动冲突处理方案,分为外部拦截方案和内部拦截方案，代码根据书中源码所写，正常运行，值得学习。

ScrollView嵌套ScrollView的滑动冲突

12-09

694

结论：在自定义控件中如下重写onInterceptTouchEvent就告诉所有父View：不要拦截事件，让我消费！！ @Override public boolean onInterceptTouchEvent(MotionEvent ev) { getParent().requestDisallowInterceptTouchEvent(true); ...

uniapp 下拉刷新和页面滚动冲突问题

jhaglkl的博客

02-23

958

uniapp 下拉刷新和页面滚动冲突问题，在页面滚动区域加 @touchmove.stop @touch.stop 即可。

uniapp的onReachBottom与scroll-view标签冲突

wangtl0的博客

08-25

1851

uniapp的onReachBottom（触底加载数据）与scroll-view标签存在冲突，把scroll-view注释之后问题解决。（1）page.json在指定页面位置配置 { “path”: “pages/flow/XXXXist”, “style”: { “enablePullDownRefresh”: true, “navigationBarTitleText”: “uni-app”, “onReachBottomDistance”:200}/触发刷新启动/ }, （2）在指定VUE页面中

uniapp长按触发事件

qq_45193707的博客

11-18

5198

<li @longtap="longtap">长按触发事件</li> <script> methods:{ longtap(){ console.log("是否保存") } }, </script>

嵌套View的滑动,及拦截冲突问题.

lin20080410的专栏

02-04

2987

分析嵌套view滑动时为什么会有冲突,怎样解冲突这里的一个场景是:父View是一个可以左右滑动的界面(可以自定义ViewPage,模拟出冲突的情况,因为ViewPager已经处理了滑动冲突,所以如果不重写,模拟不出这里的场景),其子View是一个可以上下话的界面,比如是一个listView. 抛开ims侧的事件处理逻辑,直接说应用侧. 应用侧事件分发的起点从Activity开始. pu...

uniapp小程序使用scroll-view组件实现上下左右滚动触发事件

05-15

1730

就因为这个配置，就会导致你的滚动事件不会触发，所以一定要配置相应的宽度和高度！最后实现的效果就是不论左右还是上下都可以触发滚动事件。

使用 uni-app 开发app时中使用的 @longpress 含义及使用方法

YHLSunshine的博客

09-06

7177

使用 uni-app 开发app时中使用的 @longpress 含义及使用方法

uni-app scroll-view 怎么循环滑动

12-27

### 使用 `scroll-view` 组件实现无限循环滚动为了实现在 Uni-app 中使用 `scroll-view` 组件达到无限循环滚动的效果，可以借鉴一些技巧和方法。虽然官方文档并没有直接提供关于 `scroll-view` 循环滚动的具体说明[^1]，但是可以通过模拟数据集并巧妙利用 JavaScript 来创建这种体验。 #### 创建虚拟无尽的数据源首先，在 Vue 数据模型中准备两份相同的内容作为初始渲染项，并将其拼接在一起形成一个看似无穷的数据集合： ```javascript data() { return { items: Array.from({ length: 20 }, (_, i) => ({ id: `${i}`, text: 'Item ' + (i % 10 + 1), })).concat(Array.from({ length: 20 }, (_, i) => ({ // 复制一份相同的数组片段 id: `${i + 20}`, text: 'Item ' + ((i + 20) % 10 + 1), }))), currentIndex: 0, }; } ``` 这里创建了一个由40个条目组成的列表，其中前半部分与后半部分完全一致，以此来制造出一种“循环”的错觉。 #### 动态调整可见区域位置当用户接近任一端点时（即第一个或最后一个元素），通过编程方式改变 `scroll-view` 的偏移量(`scrollTop`)以及当前索引值 (`currentIndex`) ，使得视觉上看起来像是无缝衔接地继续向下/向上滚动: ```html <template> <view class="container"> <scroll-view :scroll-y="true" @scroll="handleScroll" style="height: 300px;"> <block v-for="(item, index) in visibleItems" :key="index"> <text>{{ item.text }}</text><br/> </block> </scroll-view> </view> </template> <script> export default { computed: { visibleItems(){ const start = this.currentIndex; let end = Math.min(this.items.length - 1, this.currentIndex + 9); if(end === this.items.length - 1 && this.currentIndex >= this.items.length / 2){ setTimeout(() => {this.scrollToTop()}, 50); // 当到达底部且处于下半区时重置顶部 } return this.items.slice(start, end + 1); }, }, methods:{ handleScroll(e){ const offset = e.detail.scrollTop; if(offset <= 0 && this.currentIndex < this.items.length / 2){ this.scrollToBottom(); } this.updateCurrentIndex(offset); }, updateCurrentIndex(scrollOffset){ this.currentIndex = parseInt((scrollOffset / 40).toFixed()); }, scrollToTop(){ this.$nextTick(()=>{ this.scrollViewRef.scrollTo({ top: -(this.items.length * 40)/2, duration: 0 }); this.currentIndex = this.items.length / 2; }) }, scrollToBottom(){ this.$nextTick(()=>{ this.scrollViewRef.scrollTo({ top: (this.items.length * 40)/2, duration: 0 }); this.currentIndex = this.items.length / 2 - 10; }) } } }; </script> ``` 上述代码实现了基本的上下循环滚动逻辑。每当检测到即将触碰边界条件时就会触发相应的处理函数去平滑过渡至另一侧起点处而不打断用户体验流程。需要注意的是，实际开发过程中可能还需要考虑更多细节优化，比如动画效果、性能调优等方面的问题。