微信小程序解决弹出层层级穿透的问题

出现场景:

1. 弹出层嵌套时,第二层弹出之后,第一层照样可以滚动并且导致第二层不动

2. 使用van-dropdown-menu时 屏幕滚动时弹出层会跟着走

正常状态:

2.png

bug时:

1.png

解决方法

动态给外层盒子设置 overflow: hiddenoverflow-y: scroll

解决代码

<view class="add-contant {{ banScroll ? 'isHidden' : ''}}">
    <view class="follow-up ">
      <view class="f-type required-label">是否关键决策人</view>
      <van-dropdown-menu class="follow-up-d" active-color="#1989fa">
        <van-dropdown-item value="{{ is_decision_maker }}" options="{{ decisionOptions }}" bind:change="decisionChange"
          bind:open="openDropdown" bind:close="closeDropdown" />
      </van-dropdown-menu>
    </view>
  </view>
复制代码
.add-contant {
  height: 80%;
  overflow-y: scroll;
  box-sizing: border-box;
}

.isHidden {
  overflow: hidden;
}
复制代码
// 打开下拉框事件
    openDropdown() {
      this.setData({
        banScroll: true
      })
    },
    closeDropdown() {
      this.setData({
        banScroll: false
      })
    }
复制代码
© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享