5***@qq.com
5***@qq.com
  • 发布:2025-07-10 16:39
  • 更新:2025-07-10 16:39
  • 阅读:18

【报Bug】nvue 界面元素绑定的事件点击无效 (发生v-if或是其他交互后,事件全部失效,点击没有反应)

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Mac

PC开发环境操作系统版本号: 15.3

HBuilderX类型: 正式

HBuilderX版本号: 4.66

手机系统: Android

手机系统版本号: Android 11

手机厂商: 华为

手机机型: 荣耀play

页面类型: nvue

vue版本: vue2

打包方式: 云端

项目创建方式: HBuilderX

示例代码:

总共三个nvue文件:
c-list.nvue
c-modal.nvue
map.nvue

<template>  
    <view class="map-container">  
        <view  style="flex:1;background:blue;"></view>  
        <!-- 真机再用map替换显示 不然模拟器很卡容易异常死机-->  
        <!-- <map style="flex:1"></map> -->  
    </view>  

    <!-- 全屏覆盖层 -->  
    <cover-view class="cover-view1">  
        <view class="view1">  
            <view class="btns" v-if="isShowBtns">  
                <view class="btn" >  
                    <text class="btn" @click="tab(1)" :class="{'active1': activeIndex === 1}">普通</text>  
                </view>  
                <view class="btn" @click="tab(2)">  
                    <text class="btn" :class="{'active2': activeIndex === 2}">卫星</text>  
                </view>  
            </view>  

            <view class="add-marker" v-else>  
                <text class="save-btn" @click="save()">保存</text>  
                <image class="marker" src="../../static/images/location.png"/>  
            </view>  
        </view>  

        <view class="view2">  
            <image class="image" src="../../static/images/location.png" @click="getLocation()"></image>  
            <view class="camera-list" @click="openList1()">  
                <text class="camera-text">相机列表</text>  
            </view>  
        </view>  

        <view>  
            <c-model ref="model1" :dataList="dataList1" @clickItem="openList2"></c-model>  
            <c-model ref="model2" :dataList="dataList2" :isItemCloseModal="false"></c-model>  
        </view>  
    </cover-view>  
</template>  
<style lang="scss">  
$border: 1px solid transparent;  
$btnRedius: 40rpx;  

.map-container{  
    flex: 1;  
    border: $border;  
}  

.cover-view1{  
    position: absolute;  
    top: 50px;  
    left: 0;  
    right: 0;  
    bottom: 100rpx;  
    border: $border;  
    display: flex;  
    flex-direction: column;  
    justify-content: space-between;  
}  

.view1{  
    border: $border;  
    height: 200px;  
    pointer-events: none; /* 允许点击穿透到下层 */  
}  
.btns {  
    display: flex;  
    flex-direction: row;  
    margin: 10px;  
    border-radius: $btnRedius;  
    background: #ccc;  
}  
.btn{  
    flex: 1;  
    height: 40px;  
    line-height: 40px;  
    text-align: center;  
    color: #fff;  
    font-size: 15px;  
    font-weight: bold;  
    border: $border;  
}  
.active1{  
    background: green;  
    border-top-left-radius: $btnRedius;  
    border-bottom-left-radius: $btnRedius;  
}  
.active2{  
    background: green;  
    border-top-right-radius: $btnRedius;  
    border-bottom-right-radius: $btnRedius;  
}  

.view2{  
    // flex: 1 等价于 100%,默认是column方向的100%;   
    // 可以通过改变方向row; 还有width:750rpx也是100%意思  
    height: 350rpx;  
    width: 750rpx;  
    border: $border;  
    pointer-events: auto; /* 子元素恢复点击 */  
}  
.image{  
    position: absolute;  
    width: 40px;  
    height: 40px;  
    bottom: 250rpx;  
    left: 20rpx;  
}  
.camera-list{  
    position: absolute;  
    left: 0;  
    right: 0;  
    bottom: 0;  
    padding: 10px;  
    background: rgba(0,0,0,0.3);  
}  
.camera-text{  
    color: #fff;  
}  

.add-marker{  
    flex: 1;  
    display: flex;   
    align-items: center;   
    height: 200rpx;  
}  
.save-btn{  
    position: absolute;  
    top: 10px;  
    right: 10px;  
    width: 100px;  
    height: 40px;  
    line-height: 40px;  
    text-align: center;  
    background: green;  
    color: #fff;  
}  
.marker{  
    width: 40px;  
    height: 40px;  
    top: 100px;  
}  
</style>
<template>  
  <view class="container">  
    <!-- 遮罩层(重新启用并优化) -->  
    <!-- <view   
      v-if="isShowModal && showModal"   
      class="mask"   
      @click="closeModal"  
      :style="{opacity: maskOpacity}"  
    ></view> -->  

    <!-- 弹窗内容 -->  
    <view v-if="showModal">  
      <view   
        class="modal"   
        ref="animElement"   
        :style="{height: actualMaxHeight}"  
      >  
        <view class="modal-content">  
          <!-- 弹窗头部 -->  
          <view class="modal-header">  
            <view class="modal-title">  
              <text class="title" v-if="title">{{title}}</text>  
            </view>  
            <view class="close-wrapper" @click="closeModal">  
              <image  
                class="close"   
                src="../../static/images/close.png"   
              ></image>  
            </view>  
          </view>  

          <!-- 可滚动内容区域 -->  
          <scroll-view class="scroll-list" scroll-y>  
            <c-list :dataList="dataList" @clickItem="clickItem"></c-list>  
          </scroll-view>  
        </view>  
      </view>  
    </view>  
  </view>  
</template>
<template>  
  <scroll-view class="scroll-view" scroll-y="true">  
    <recycle-list   
      for="(item, i) in longList"  
      key-field="id"  
      style="width: 750rpx;"  
    >  
      <cell-slot scope="item">  
        <view class="item" @click="handleItemClick(item)">  
          <text class="item-text">{{item.name}}</text>  
          <text class="item-image">{{item.isChecked ? '✅' : '未选中'}}</text>  
        </view>  
      </cell-slot>  
    </recycle-list>  
  </scroll-view>  
</template>

操作步骤:

就正常点击 “相机列表” 按钮,然后通关weex提供的动画展示c-modal.nvue内容; c-modal有一个关闭按钮, 第一次都可以正常点击关闭, 等第二次或是,在弹窗列表中选中一个item后,关闭按钮就失效了, 我说的失效是,点击事件不会触发,连进去都没有;就类似一张静态图片没有任何绑定事件;点击没有反应;

预期结果:

希望的是nvue里面元素我不管怎么布局,至少绑定的事件可以正常触发,不然业务根本就走不下去; 我是希望有谁告诉我怎么做;问题原因在哪; 是布局上问题还是啥问题导致的? 布局上我主要是通过flex 布局的;百度了一下说是position定位布局有可能导致问题,但是我都改成flex布局,还是没有用;

实际结果:

点击nvue 上内容, 只要发生过交互或是v-if 改变内容显示和隐藏;都会导致一些事件丢失,就是原本正常的事件,现在点击都没有反应;

bug描述:

nvue事件点击无效,我用nvue写了些东西覆盖在map地图上, 一个弹窗类似popup里面列表滚动,然后右上角一个关闭按钮, 第一次可以正常打开和关闭, 第二次点击就没有反应, 控制台没有任何输出东西, 就好像没有点到它一样;不知道啥原因的bug;

2025-07-10 16:39 负责人:无 分享
已邀请:

要回复问题请先登录注册