1***@qq.com
1***@qq.com
  • 发布:2022-04-07 16:24
  • 更新:2022-04-07 17:23
  • 阅读:621

swiper组件内嵌video,video上面覆盖了cover-view,绑定了click事件,用来点击播放、暂停视频,滑动swiper会触发这个click事件

分类:nvue
<template>  
    <swiper  
        :style="{  
            height: windowHeight   'px',  
            width: windowWidth   'px'  
        }"  
        class="swiper"  
        :vertical="true"  
        @change="handleChange"  
    >  
        <swiper-item  
            :key="item.id"  
            v-for="(item, index) in videoData"  
        >  
            <view  
               :style="{  
                      height: windowHeight   'px',  
                      width: windowWidth   'px'  
                    }"  
                class="video-item def_flex"  
            >  
                <video  
                    :style="{  
                        height: windowHeight  
                    }"  
                    object-fit="cover"  
                    class="video"  
                    :ref="'video'   videoIndex"  
                    :id="'video'   videoIndex"  
                    :controls="false"  
                    :show-play-btn="false"  
                    :show-fullscreen-btn="false"  
                    :src="videoUrl"  
                    :vslide-gesture-in-fullscreen="false"  
                    :enable-play-gesture="false"  
                    :enable-progress-gesture="false"  
                    @pause="handlePause"  
                    @ended="handleEnded"  
                >  
                    <cover-view  
                        :style="{  
                                height: windowHeight   'px',  
                                width: windowWidth   'px'  
                             }"  
                    >  
                        <view  
                            class="video-play"  
                            :style="{  
                                     height: windowHeight   'px',  
                                      width: windowWidth   'px'  
                                 }"  
                            @click="handleVideoClick" // swiper滑动,很容易触发这个方法  
                        ></view>  
                    </cover-view>  
                </video>  
            </view>  
        </swiper-item>  
    </swiper>  
</template>

nvue页面,想做一个app,实现类似抖音的效果,,真机调试的时候滑动swiper,很容易触发handleVideoClick,大佬们有什么解决办法吗

2022-04-07 16:24 负责人:无 分享
已邀请:
_孙大圣_

_孙大圣_ - 只想用nvue

在滑动的时候,给个标识,在滑动未结束时,或者滑动结束多少毫秒后才能点击

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