微信小程序mp-half-screen-dialog页面滚动问题解决

微信小程序mp-half-screen-dialog页面滚动问题解决

微信小程序中使用 mp-half-screen-dialog ，在滑动 mp-half-screen-dialog 的时候，页面如果是处于scroll的情况下，会随之滑动，为了规避这个问题，可以使用以下解决方案（直接上代码）:
wxml:

<mp-half-screen-dialog
  show="{
     
     { show }}"
  maskClosable="{
     
     { maskclosable }}"
  title="{
     
     { detail.workorder_title }}"
  subTitle="{
     
     { detail.workorder_no }}"
  closabled="{
     
     { true }}"
  class="f-half-dialog"
  catchtouchmove="preventTouchMove"
  bindclose="handleHalfDialogClose"
>
</mp-half-screen-dialog>

js:

methods: {
    
    
    handleHalfDialogClose() {
    
    
      // 关闭事件无需刷新列表
      // this.triggerEvent('initShow', {}, { bubbles: true, composed: true })
    },

    preventTouchMove() {
    
    
      // 解决蒙层下页面滚动问题
    }
  }

本质就是 wxml中的catchtouchmove=“preventTouchMove” 以及 js中的preventTouchMove()空方法就能够规避该问题。