vue 二级路由页面无法滚动

Question

Answer 1

MintUI吗 下拉组件滚动有bug

Answer 2

我只看到router-view没看到router-view下的page
只是这样看的话
你需要给你的router-view加一个高度、一个滚动条的CSS样式

Answer 3

是不是要自己写一个div 然后赋值一个高度才行

Answer 4

你把对应的代码提出来一下比较好，看是否设置了高度，还有overflow-y:scroll

Answer 5

滚动需要满足俩个条件：

1：内容溢出
2：父元素设overfolw:scroll/auto

而内容溢出需要满足俩个条件

1：父元素设height
2:子元素height超出父元素height

所以，你很从上面四点检查一下，应该能找到问题所在

Answer 6

请问，最后怎么解决的？

我也遇见了二级路由不滚动的情况，我使用better-scroll这个插件解决了，不过很麻烦。

需要在所有http请求中获取dom渲染之后的inWrapper高度，watch高度变化之后刷新better-scroll实例。

<template>
  <div class="overflow" ref="wrapper">
    <div ref="inWrapper"></div>
  </div>
</template>

//...
data() {
 return {
  cHeight: 0,
  scroll: null
 }
}
//...
watch: {
  cHeight: {
    handler: function (newVal) {
      if (newVal) {
        this.$nextTick(() => {
          this.$refs.inWrapper.style.minHeight = newVal + 20 + 'px';

          if (!this.scroll) {
            this.scroll = this.BScroll();
          } else {
            this.scroll.refresh();
          }
        })
      }
    }
  }
}
//...
methods: {
  BScroll() {
    let cH = document.documentElement.clientHeight;
    this.$refs.wrapper.style.height = cH - 10 + 'px';
    return betterScroll(this.$refs.wrapper);
  },
  onLoad() {
    this.$api.getList().then(()=>{
      this.$nextTick(() => {
        this.cHeight = this.$refs.inWrapper.offsetHeight;
      });
   });
  }
}