使用uni-app nvue在list组上绑定方法的同时list内部的元素同样绑定方法这时候跳转页面再返回list不可滑动
使用uni-app nvue在list组上绑定方法的同时list内部的元素同样绑定方法这时候跳转页面再返回list不可滑动
开发环境 | 版本号 | 项目创建方式 |
---|---|---|
Windows | window11 | HBuilderX |
产品分类:uniapp/App
PC开发环境操作系统:Windows
PC开发环境操作系统版本号:window11
HBuilderX类型:正式
HBuilderX版本号:4.36
手机系统:iOS
手机系统版本号:iOS 17
手机厂商:苹果
手机机型:iphone 14 pro
页面类型:nvue
vue版本:vue2
打包方式:云端
项目创建方式:HBuilderX
示例代码:
```html
<template>
<view class="page">
<list :pagingEnabled="true" @touchmove="cellTouchMove" @touchend="cellTouchMove">
<cell v-for="(item,index) in 100" :key="index">
<view class="myVideo">
<text class="text">{{index}}</text>
<view class="mask" @click="maskClick">
<view class="action">
<button @click="btnClick">testBtn</button>
</view>
</view>
</view>
</cell>
</list>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
cellTouchMove(){
console.log("maskClick");
},
maskClick(){
console.log("maskClick");
},
btnClick() {
uni.navigateTo({
url: '/pages/detail/detail'
})
}
}
}
</script>
<style>
.page {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.myVideo {
width: 750rpx;
height: 750rpx;
background-color: green;
align-items: center;
justify-content: center;
border: 2rpx solid red;
}
.myVideo .text {
font-size: 50rpx;
color: #fff;
font-weight: bold;
}
.mask{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: red;
opacity: 0.5;
}
.action{
position: absolute;
right: 20rpx;
bottom: 100rpx;
}
</style>
操作步骤: 使用代码示例 测试可复现问题
预期结果: list可正常滑动 元素事件正常响应
实际结果: list不可滑动 元素事件无法响应
bug描述: 使用nvue 在list组将绑定了两个touche方法 同时list内部的元素绑定了一个点击事件 这时候跳转某个页面再返回 list变的不可滑动 元素的事件也全部失效
更多关于使用uni-app nvue在list组上绑定方法的同时list内部的元素同样绑定方法这时候跳转页面再返回list不可滑动的实战教程也可以访问 https://www.itying.com/category-93-b0.html
2 回复
nvue页面已不再更新维护,建议升级到uni-app x项目。
更多关于使用uni-app nvue在list组上绑定方法的同时list内部的元素同样绑定方法这时候跳转页面再返回list不可滑动的实战教程也可以访问 https://www.itying.com/category-93-b0.html
这是一个典型的nvue页面事件冒泡和手势冲突问题。在nvue中,list组件的手势事件和内部元素的事件处理不当会导致手势失效。
解决方案:
-
移除list上的touchmove和touchend事件绑定,这些事件会干扰list的默认滚动行为
-
修改maskClick事件处理,添加stop修饰符阻止事件冒泡:
<view class="mask" [@click](/user/click).stop="maskClick">
- 确保按钮点击事件也阻止冒泡:
<button [@click](/user/click).stop="btnClick">testBtn</button>