XDialog 设置scroll 为false没有效果

[wwj007176]

版本号

"vux": "^2.1.1-rc.11"
"vue": "^2.2.2"

我在页面设置了 :scroll="false"

代码我是复制你的demo

    <div v-transfer-dom>
      <x-dialog v-model="showNoScroll" class="dialog-demo" :scroll="false">
        <div class="img-box">
          <img src="../../assets/images/icon_close.png" style="max-width:100%">
        </div>
        <div @click="showNoScroll=false">
          <span class="vux-close"></span>
        </div>
      </x-dialog>
    </div>

设置scroll 为fasle 后 body的内容依然可以滚动

[airyland]

在你手机上官网 demo 正常吗？

[wwj007176]

我是用chrome 访问的，看你的demo是正常的
我把demo的代码放到我的工程就不行了

[airyland]

把业务代码移除，帖上能重现的最简单的 .vue 文件代码。

[wwj007176]

app.vue

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

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

index.vue

<template>
  <div style="height: 1000px">
    <group>
      <x-switch v-model="show" :title="$t('Toggle')"></x-switch>
      <x-switch v-model="showHideOnBlur" :title="$t('hide on clicking mask')"></x-switch>
    </group>
    <group style="padding-top: 300px">
      <x-switch v-model="showNoScroll" :title="$t('disable background scrolling')"></x-switch>
    </group>
    <div v-transfer-dom>
      <x-dialog v-model="show" class="dialog-demo">
        <div class="img-box">
          <img src="../assets/demo/dialog/01.jpg" style="max-width:100%">
        </div>
        <div @click="show=false">
          <span class="vux-close"></span>
        </div>
      </x-dialog>
    </div>
    <div v-transfer-dom>
      <x-dialog v-model="showHideOnBlur" class="dialog-demo" :hideOnBlur="true">
        <div class="img-box">
          <img src="../assets/demo/dialog/01.jpg" style="max-width:100%">
        </div>
        <div @click="showHideOnBlur=false">
          <span class="vux-close"></span>
        </div>
      </x-dialog>
    </div>
    <div v-transfer-dom>
      <x-dialog v-model="showNoScroll" class="dialog-demo" :scroll="false">
        <div class="img-box">
          <img src="../assets/demo/dialog/01.jpg" style="max-width:100%">
        </div>
        <div @click="showNoScroll=false">
          <span class="vux-close"></span>
        </div>
      </x-dialog>
    </div>

    <group style="padding-top: 300px">
      <x-switch v-model="showScrollBox" :title="$t('long long content')"></x-switch>
    </group>
    <div v-transfer-dom>
      <x-dialog v-model="showScrollBox" class="dialog-demo">
        <p class="dialog-title">Long content</p>
        <div class="img-box" style="height:100px;padding:15px 0;overflow:scroll;-webkit-overflow-scrolling:touch;">
          <p v-for="i in 20">{{i}}</p>
        </div>
        <div @click="showScrollBox=false">
          <span class="vux-close"></span>
        </div>
      </x-dialog>
    </div>

  </div>
</template>

<i18n>
hide on clicking mask:
  zh-CN: 点击遮罩自动关闭
Toggle:
  zh-CN: 显示/隐藏
disable background scrolling:
  zh-CN: 背景不可滚动
long long content:
  zh-CN: 很长很长的内容
</i18n>

<script>
import { XDialog, XButton, Group, XSwitch, TransferDomDirective as TransferDom } from 'vux'
export default {
  directives: {
    TransferDom
  },
  components: {
    XDialog,
    XButton,
    Group,
    XSwitch
  },
  data () {
    return {
      show: false,
      showNoScroll: false,
      showHideOnBlur: false,
      showScrollBox: false
    }
  }
}
</script>

<style lang="less" scoped>
@import '~vux/src/styles/close';
.dialog-demo {
  .weui-dialog{
    border-radius: 8px;
    padding-bottom: 8px;
  }
  .dialog-title {
    line-height: 30px;
    color: #666;
  }
  .img-box {
    height: 350px;
    overflow: hidden;
  }
  .vux-close {
    margin-top: 8px;
    margin-bottom: 8px;
  }
}
</style>

[wwj007176]

index.vue 是我直接用的你的代码就是不行

[airyland]

确定没报错什么的？

[wwj007176]

没有报错。。
body还是可以滚动

[airyland]

应该不是版本问题，不过可以尝试升级到最新试试。

[wwj007176]

我重新下载了一个新的项目，然后复制了 昨天的 代码
在手机上浏览时正常的，如果用chrome 访问body 还是可以滑动
但是访问你的demo是正常的，
https://vux.li/demos/v2/?x-page=v2-doc-home#/component/x-dialog

是我还差什么地方没有配置吗？

[airyland]

建个 repo 来看看吧。

[wwj007176]

弄了半天github 都没下下来，最后检查样式
加入下面的样式就正常了

* {
    margin: 0;
    padding: 0;
}

html, body {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
}

这个是为什么 有点没弄明白

[zhump]

@wwj007176 果然是这样。加上就好了。另请教下@airyland 遮罩背景不滚动下的方案是这么实现的，很神奇，我一般是 记下scrollTop ,然后transform过去，禁止页面滚动条，关闭后，再把一切还原。。但是我发现vux并没有这么麻烦就实现了 遮罩不滚动，故请教下，多谢。