Vux: popup 滑动穿透

[varzy]

hi,
我在使用 vux 中的 popup 时，出现了滑动穿透的问题，即滑动 popup 到底后，popup 下层的内容也会跟随滑动。本来以为是我的配置有问题，但我使用了官网提供的 airyland/vux2 模板后，仍然出现了此问题。

请问这属于一个 bug 吗？如果不属于，您有什么建议处理这种 popup 内部也需要进行滚动的情况吗？

测试代码：

<template>
  <div>
    <button @click="isShow = true">Show</button>

    <ul>
      <li v-for="item in 1000">{{ item }}</li>
    </ul>

    <popup v-model="isShow" height="64%">
      <ul>
        <li v-for="item in 100">{{ item }}</li>
      </ul>
    </popup>
  </div>
</template>

<script>
  import { Popup } from 'vux'

  export default {
    components: {
      Popup
    },
    data () {
      return {
        isShow: false
      }
    }
  }
</script>

[hookbin]

求解决！！！

[LuckyDing]

网上说给遮罩层加上@touchmove.prevent有用么？可是VUX如何选择遮罩dom

[lily-1]

求解决！！！

[alicksnake22]

是有这个问题

[2ue]

在打开popup的时候，设定body高度为100%，overflow:hidden，关闭时解除限制，解决了问题

.prevent-scroll{
        box-sizing: border-box;
    height: 100vh !important;
    overflow: hidden !important;
}

function preventScroll() {
    addClass(document.getElementById('body'), 'prevent-scroll')
}

function removePreventScroll() {
    removeClass(document.getElementById('body'), 'prevent-scroll')
}

watch: {
    dialogVisible: function (value) {
        if (value) {
            preventScroll()
        } else {
            removePreventScroll()
        }
    }
}

[saplmm]

我也遇到了...可以官网的demo并没有这个问题...不知道作者能不能帮忙看看...

[saplmm]

@varzy 请问 问题解决了吗？

[saplmm]

还是没有解决啊....

[cxls]

在app.vue style 中加入以下代码即可:
html, body {
height: 100%;
width: 100%;
overflow-x: hidden;
}

[SaltedFishYuto]

这些方法好像都没用

[FrankCheungCN]

个人在popup包裹的元素上添加touchstart事件，阻止默认事件即可阻止背景滑动

<div v-transfer-dom>
  <popup v-model="modal" position="bottom" :is-transparent="true">
    <div @touchstart="handleTouch">
      <div class="title" v-text="data.title"></div>
      <div class="content" v-text="data.description"></div>
    </div>
  </popup>
</div>

handleTouch(e) { e.preventDefault(); }