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 页面有所不同。
解决方案:
- 将点击事件从 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>
- 如果上述方法仍不生效,可以尝试使用 @touch 事件替代:
<swiper-item :style="{'height':xscroll}">
<view class="swcont" @touchstart="showMenu">
<!-- 内容 -->
</view>
</swiper-item>

