uni-app swiper 设置纵向滚动后增加了点击事件,不能滑动

uni-app swiper 设置纵向滚动后增加了点击事件,不能滑动

开发环境 版本号 项目创建方式
Windows I7-9750H HBuilderX

产品分类:uniapp/App

PC开发环境操作系统:Windows

PC开发环境操作系统版本号:I7-9750H

HBuilderX类型:正式

HBuilderX版本号:3.1.22

手机系统:Android

手机系统版本号:Android 11

手机厂商:华为

手机机型:荣耀20

页面类型:nvue

打包方式:云端

示例代码:

<template>    
  <view >    

        <swiper vertical="true" :style="{'height':xscroll}">    
            <swiper-item  :style="{'height':xscroll}">    
                <view  class="swcont">    
                <text class="ahtit" :style="{'color':FtColor}">标题标题 {{index}}</text>    
                <text class="swptxt" :style="{'color':FtColor,'line-height':FontSize*2+'px','font-size':FontSize+'px','height':xscroll}">000十大大苏打阿萨大大撒旦</text>     
            </view>    
            </swiper-item>    

            <swiper-item  :style="{'height':xscroll}">    
                <view  class="swcont">    
                <text class="ahtit" :style="{'color':FtColor}">标题标题 {{index}}</text>    
                <text class="swptxt" :style="{'color':FtColor,'line-height':FontSize*2+'px','font-size':FontSize+'px','height':xscroll}">1111十大大苏打阿萨大大撒旦</text>     
            </view>    
            </swiper-item>    
            <swiper-item  @click="showMenu"  :style="{'height':xscroll}">    
                <view  class="swcont">    
                <text class="ahtit" :style="{'color':FtColor}">标题标题 {{index}}</text>    
                <text class="swptxt" :style="{'color':FtColor,'line-height':FontSize*2+'px','font-size':FontSize+'px','height':xscroll}">2222十大大苏打阿萨大大撒旦</text>     
            </view>    
            </swiper-item>    
            <swiper-item  @click="showMenu"  :style="{'height':xscroll}">    
                <view  class="swcont">    
                <text class="ahtit" :style="{'color':FtColor}">标题标题 {{index}}</text>    
                <text class="swptxt" :style="{'color':FtColor,'line-height':FontSize*2+'px','font-size':FontSize+'px','height':xscroll}">3333十大大苏打阿萨大大撒旦</text>     
            </view>    
            </swiper-item>    
            <swiper-item  @click="showMenu"  :style="{'height':xscroll}">    
                <view  class="swcont">    
                <text class="ahtit" :style="{'color':FtColor}">标题标题 {{index}}</text>    
                <text class="swptxt" :style="{'color':FtColor,'line-height':FontSize*2+'px','font-size':FontSize+'px','height':xscroll}">4444十大大苏打阿萨大大撒旦</text>     
            </view>    
            </swiper-item>    
            <swiper-item  @click="showMenu"  :style="{'height':xscroll}">    
                <view  class="swcont">    
                <text class="ahtit" :style="{'color':FtColor}">标题标题 {{index}}</text>    
                <text class="swptxt" :style="{'color':FtColor,'line-height':FontSize*2+'px','font-size':FontSize+'px','height':xscroll}">555十大大苏打阿萨大大撒旦</text>     
            </view>    
            </swiper-item>    
        </swiper>    

  </view>    

</template>    

<script>     
var k=0  
    export default {     

         data() {    
             return {     
                 FtColor:'#333',    
                 FontSize:20,    
                xscroll:''      
             }    
         },    
         onLoad() {    
             var that=this;     
              uni.getSystemInfo({    
                success: function (res) {    
                    that.xscroll = res.windowHeight;       
                }    
              });      

             //翻页设置    

         },    
        methods: {     
            showMenu(){      
                k++  
             console.log('sd'+k)  
            },    
        }    
    }    
</script>    

<style>    

</style>    

操作步骤:

按照示例,即可看到

预期结果:

可以滑动,可以有点击事件,互不干预。

实际结果:

有滑动,不能点击。

bug描述:

swiper 设置纵向滚动,增加了点击事件,不能滑动!


更多关于uni-app swiper 设置纵向滚动后增加了点击事件,不能滑动的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

list cell 用错了,要循环cell <view class="swcont"> 事件可以帮到view上边 为什么帮到swiper-item呢

更多关于uni-app swiper 设置纵向滚动后增加了点击事件,不能滑动的实战教程也可以访问 https://www.itying.com/category-93-b0.html


谢谢。去掉了list,改为view,但是依然很难滚动。

单手回滚,不能动弹。

没人回吗

在 nvue 页面中,swiper 组件添加点击事件后确实可能影响滑动操作。这是因为 nvue 的触摸事件机制与 vue 页面有所不同。

解决方案:

  1. 将点击事件从 swiper-item 移动到其内部的子元素上,避免直接在 swiper-item 上绑定事件:
<swiper-item :style="{'height':xscroll}">
    <view class="swcont" @click="showMenu">
        <text class="ahtit" :style="{'color':FtColor}">标题标题 {{index}}</text>
        <text class="swptxt" :style="{'color':FtColor,'line-height':FontSize*2+'px','font-size':FontSize+'px','height':xscroll}">2222十大大苏打阿萨大大撒旦</text>
    </view>
</swiper-item>
  1. 如果上述方法仍不生效,可以尝试使用 @touch 事件替代:
<swiper-item :style="{'height':xscroll}">
    <view class="swcont" @touchstart="showMenu">
        <!-- 内容 -->
    </view>
</swiper-item>
回到顶部