3***@qq.com
3***@qq.com
  • 发布:2020-03-30 10:38
  • 更新:2021-05-12 14:59
  • 阅读:2284

【报Bug】在VUE页面 scroll-view 里面的组件使用长按事件,会和scroll-view的滑动冲突。

分类:HBuilderX
Vue

详细问题描述

(DCloud产品不会有明显的bug,所以你遇到的问题大都是在特定环境下才能重现的问题,请仔细描述你的环境和重现方式,否则DCloud很难排查解决你的问题)

[内容] 在VUE页面 scroll-view 里面的元素组件使用长按事件,会和scroll-view的滑动冲突。

重现步骤

[步骤]
大概代码

<scroll-view scroll-y="true" :style="{ height: computedconfigtopHeightPx + 'px', width: computedscreenWidthRpx + 'rpx' }" :show-scrollbar="false">  
                         <!--     列表内的元素 自定义组件-->  
                <config-hang  
                    v-for="(value, index) in ServeSceneData"  
                    :key="index"  
                    @click.native="xiuGaiSceneBtnHandle(value)"  
                    @longpress.native="oneSceneRightClickBtnHandle(value, index)"  
                >  
                </config-hang>  
        </scroll-view>

代码如上,很简单就是一个scroll-view 包了一组自定义的列表元素,列表元素有长按事件。

[结果]这时候滑动列表 会触发当前手指下面元素的长按事件。(目前测试只有VUE页面使用scroll-view 包裹时有这个问题,NVUE不会出现,VUE使用页面级滚动也不会有问题)

[期望] 可以在scroll-view 包裹时 滑动列表的时候不触发长按事件

[如果语言难以表述清晰,拍一个视频或截图,有图有真相]

IDE运行环境说明

[HBuilder 或 HBuilderX。如果你用其他工具开发uni-app,也需要在此说明]

[IDE版本号] HBuilderX 2.6.5

[windows版本号]

[mac版本号]

uni-app运行环境说明

[运行端是h5或app或某个小程序?] app

[运行端版本号]

[项目是cli创建的还是HBuilderX创建的?如果是cli创建的,请更新到最新版cli再试]
HBuilderX创建
[编译模式说明:自定义组件模式?纯nvue模式?v3模式?]
v3模式

App运行环境说明

[Android版本号] 随便

[iOS版本号]随便

[手机型号]随便

[模拟器型号]随便

附件

[IDE问题请提供HBuilderX运行日志。菜单帮助-查看运行日志,点右键打开文件所在目录,将log文件压缩成zip包上传]

[App问题请提供可重现问题的代码片段,你补充的细一点,问题就解决的快一点]

[App安装包或H5地址]

[可重现代码片段]

联系方式

[QQ]

2020-03-30 10:38 负责人:无 分享
已邀请:
小旺仔

小旺仔


给里面的子项添加@touchstart、@touchmove和@longpress事件


itemTouchSatrt(e) {
this.isMove = false
this.touchStartX = e.touches[0].clientX
this.touchStartY = e.touches[0].clientY
},
itemTouchMove(e) {
let delX = e.touches[0].clientX - this.touchStartX
let delY = e.touches[0].clientY - this.touchStartY
if (Math.abs(delX) > 5 || Math.abs(delY) > 5) {
this.isMove = true
}
},

longPress(item) {
if (!this.isMove) {
//你的长按操作
}
},

DCloud_uniCloud_WYQ

DCloud_uniCloud_WYQ

快速滑动缓慢滑动都会触发longpress吗?最好整理一个简单的demo发上来

  • 3***@qq.com (作者)

    快速和缓慢都会有,我现在已经该成NVUE页面了。暂时没有这个问题了。

    2020-04-07 11:50

  • l***@gmail.com

    遇到相同问题,scroll-view做的item项中如果包含长按事件,只要滑动就会触发长按事件,基本没法用

    2020-04-08 08:43

  • DCloud_uniCloud_WYQ

    回复 l***@gmail.com: 请上传一份简单的能复现问题的demo,目前长按的逻辑是横竖向350ms内移动距离均不超过10像素

    2020-04-08 10:59

1***@189.cn

1***@189.cn - Game over.

参照 解决方法

我的方法是:

  1. 增加一个属性, isScroll: false
  2. touchstart 事件 "isScroll = true" // 判断长按事件
  3. 接着 touchmove 事件 "isScroll = false" //判断为滚动事件
  4. 在longpress 事件触发时判断 isScroll 状态

够详细了吧!

该问题目前已经被锁定, 无法添加新回复