在nvue页面使用list组件里嵌套了slider组件，我在拖动slider的时候还是会触发list的滚动，使用.stop无效

1***@qq.com (作者)

<list @touchmove.stop.prevent :offset-accuracy="100" :bounce="false" :loadmoreoffset="wHeight*3"

show-scrollbar="false" ref="listBox" :pagingEnabled="true">
<cell v-for="(item,i) in videoList" :key="i" :ref="'list'+item.courseDetailsId">

<view class="swipers-items" @longpress="openBs()" @appear="appear(item.courseDetailsId,i)"

style="boxStyle">
<!-- 视频 -->

<video :direction="0" @play="videoPlay()" @click.stop.prevent="playOrStop()"

@timeupdate="timeupdate" :controls="false" @pause.stop.prevent="pauseVideo"

show-fullscreen-btn="false" object-fit="cover"
v-if="isShowVideo == item.courseDetailsId && item.videoUrl" :play-strategy="2"

show-loading="true" codec="software" :muted="false" :show-center-play-btn="true" :loop="true"
@ended="ended" :enable-progress-gesture="false" :poster="item.titleImg"

ref="'myVideo'+item.courseDetailsId" :id="'myVideo'+item.courseDetailsId" :src="item.videoUrl"

autoplay="item.autoPlay" class="swipers-items-video"></video>
<image v-else @click="!item.videoUrl?openPay():''" :src="item.titleImg" class="swipers-items-imgsbg"

mode="aspectFill">

</image>

<!-- 返回图标 -->

<image src="../static/nvueIcon/backs.png" @click="goBack()" class="swipers-items-back" mode="">

</image>

<!-- 右边操作 -->

<view class="swipers-items-right" :style="rightTop" v-if="showControls">

<view class="swipers-items-right-item">

<image @click.stop.prevent="openShow()" :src="item.titleImg?item.titleImg:info.titleImg"

style="width: 60rpx;height: 60rpx;border-radius: 30rpx;" mode="aspectFill"></image>

</view>

<view class="swipers-items-right-item">

<view class="swipers-items-right-item-img" @click.stop="dianzan(item)">

<image v-if="item.isGood!=0" class="swipers-items-right-item-imgs"

src="../static/nvueIcon/myLove_.png" mode=""></image>

<image v-else class="swipers-items-right-item-imgs" src="../static/nvueIcon/myLove.png"

mode=""></image>

</view>

<view class="swipers-items-right-item-txt">

<text class="swipers-items-right-item-txts">

{{item.goodNum}}

</text>

</view>

</view>

<view class="swipers-items-right-item" @click="share()">

<view class="swipers-items-right-item-img">

<image class="swipers-items-right-item-imgs" src="../../static/images/me/share.png"

mode=""></image>

</view>

<view class="swipers-items-right-item-txt">

<text class="swipers-items-right-item-txts">

分享

</text>

</view>

</view>

                <view class="swipers-items-right-item" v-if="isCollect">  

                    <view class="swipers-items-right-item-img" @click.stop="shoucang()">  

                        <image class="swipers-items-right-item-imgs" src="../../static/images/me/shuqian_s.png"  

                            mode=""></image>  

                    </view>  

                    <view class="swipers-items-right-item-txt">  

                        <text class="swipers-items-right-item-txts">  

                            已追  

                        </text>  

                    </view>  

                </view>  

                <view class="swipers-items-right-item" v-else>  

                    <view class="swipers-items-right-item-img" @click.stop="shoucang()">  

                        <image class="swipers-items-right-item-imgs" src="../../static/images/me/shuqian.png"  

                            mode=""></image>  

                    </view>  

                    <view class="swipers-items-right-item-txt">  

                        <text class="swipers-items-right-item-txts">  

                            追剧  

                        </text>  

                    </view>  

                </view>  

            </view>  

            <!-- 底部视频信息 -->  

            <view class="swipers-items-btom" v-if="showControls">  

                <view class="swipers-items-btom-box">  

                    <!-- 标题 -->  

                    <view class="swipers-items-btom-box-title">  

                        <text class="swipers-items-btom-box-titles">  

                            {{item.courseDetailsName}}  

                        </text>  

                    </view>  

                    <!-- 介绍 -->  

                    <view v-if="item.content" class="swipers-items-btom-box-content">  

                        <text class="swipers-items-btom-box-contents">{{item.content}}</text>  

                    </view>  

                    <!-- 集数 -->  

                    <view @click.stop.prevent="openShow()" class="swipers-items-btom-box-num">  

                        <text class="swipers-items-btom-box-nums">  

                            第{{item.num}}集（共{{meunList.length}}集）选集 >  

                        </text>  

                    </view>  

                </view>  

            </view>  

            <!-- 拖动进度 -->  

            <view class="myDurationCenter" v-if="isShowCurrentTime && isShowVideo == item.courseDetailsId"  

                style="position: absolute;bottom: 400rpx;width: 750rpx;flex-direction: row;justify-content: center;">  

                <text style="color: #ffffff;">  

                    {{formatDuration(currentTime1)}} / {{formatDuration(duration1)}}  

                </text>  

            </view>  

            <!-- 拖动进度条 -->  

            <view v-if="showControls && isShowVideo == item.courseDetailsId" class="myDuration">  

                <uv-slider @changing="changing" activeColor="#999999" @change="touchend" block-size="12"  

                    v-model="currentTime1" :max="duration1"></uv-slider>  

                <!-- <progressBar /> -->  

            </view>  

            <!-- 中心播放按钮 -->  

            <view @click.stop.prevent="playOrStop()" class="startPlay" v-if="isPlay == false && item.videoUrl"  

style="{top:rightTop.top}">
<image class="startPlay-img" src="../../static/images/pay/startPlay.png" mode=""></image>

</view>

</view>

</cell>

</list>我是一个这样的结构，都是相对于swipers-items定位的

2024-06-17 17:03

爱豆豆

回复 1***@qq.com: 你说的是视频的进度条吧？看你代码里没有list的滚动条啊

2024-06-17 17:09

1***@qq.com (作者)

回复 爱豆豆: list是可以滚动的 我使用slider作为视频的进度条

2024-06-17 17:12

爱豆豆

回复 1***@qq.com: 我还以为是要自定义list的滚动条呢

2024-06-17 17:13

1***@qq.com (作者)

现在就是 我在拖动slider的时候 稍微上下滑动一点就会触发list的滚动，然后导致slider的拖动结束事件不在触发

2024-06-17 17:13

爱豆豆

回复 1***@qq.com: 你的问题时 拖动视频进度时 list还会上下滚动对吧

2024-06-17 17:13

1***@qq.com (作者)

而且我在拖动slider的时候使用preventDefault阻止默认行为也不生效 好像nvue中没有这个事件，用官方说的stop也阻止不了

2024-06-17 17:14

1***@qq.com (作者)

回复 爱豆豆: 对 我在拖动进度的时，如果我就保持水平 就是正常，如果稍微上下的一些 就会触发list的滚动

2024-06-17 17:15

爱豆豆

回复 爱豆豆: 你可以自定义一个slider组件或者你去插件市场里找一个 给slider组件添加两个事件

@touchstart 和@ touchend 就是在你手指触摸到slider组件时 就把list的scrollable关闭 不让list滚动 然后你拖动完视频进度 松开手指时再把list的scrollable打开 就不会触发list滚动了

2024-06-17 17:16

爱豆豆

回复 爱豆豆: 你可以试下 我之前在list里做过一个同向滚动的功能 我就是这么搞得 只不过我的是竖着的 你这个是横的

2024-06-17 17:18

1***@qq.com (作者)

回复 爱豆豆: 不行，我刚刚一下自己写了一个使用@touchmove的测试，我在拖动的时候把scrollable设置为false，然后如果我上下稍微滑动一下，就不会触发touchend里的scrollable滚动到了，导致我整个页面都滚动不了

2024-06-17 17:19

1***@qq.com (作者)

我也不知道为啥 我在使用@touchmove的时候稍微上下拖动了一点 就会导致touchend都不触发了

2024-06-17 17:20

1***@qq.com (作者)

应该是 只要我上下拖动的距离离开我这个组件的上下边界酒会导致touchend不触发

2024-06-17 17:21

爱豆豆

回复 1***@qq.com: 你这个touchmove用在了哪里？

2024-06-17 17:24

1***@qq.com (作者)

回复 1205559: 在uv-slider组件里<view class="uv-slider" :style="[$uv.addStyle(customStyle)]">

<slider :min="min" :max="max" :step="step" :value="sliderValue" :activeColor="activeColor"

backgroundColor="backgroundColor" :blockSize="$uv.getPx(blockSize)" :blockColor="blockColor"

showValue="showValue" :disabled="disabled" @changing.stop.prevent="changingHandler"
@change.stop.prevent="changeHandler"></slider>

</view>

2024-06-17 17:33

爱豆豆

回复 1***@qq.com: 我看了下我之前做的 用的是scroll-view不是list 所以没有问题

刚是试了下list在关闭scrollable时 手指只要上下动了就不会在触发@touchend事件了 不知道是不是bug

2024-06-17 17:37

1***@qq.com (作者)

回复 爱豆豆: 对 就是这个问题，我现在不知道怎么解决，官方也没有说明

2024-06-17 18:02

爱豆豆

回复 1***@qq.com: 改用scroll-view试试吧

2024-06-19 14:15