使用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组件的手势事件和内部元素的事件处理不当会导致手势失效。

解决方案:

  1. 移除list上的touchmove和touchend事件绑定,这些事件会干扰list的默认滚动行为

  2. 修改maskClick事件处理,添加stop修饰符阻止事件冒泡:

<view class="mask" [@click](/user/click).stop="maskClick">
  1. 确保按钮点击事件也阻止冒泡:
<button [@click](/user/click).stop="btnClick">testBtn</button>
回到顶部