vue2项目中better-scroll 插件使用时候页面不滚动

Question

引入better-scroll插件，在created函数中获取页面的数据成功回掉里面初始化的better-scroll但是页面不能滚动，

Answer 1

页面不滚动是因为

class=scroll元素的高度大于或者等于ul的高度。
注意《使用bs插件的时候子容器的高度一定要大于父容器的高度，才会产生滚动效果。》
所以了问题找到了，怎么解决看着办。
...将父容器高度设置为100%==

Answer 2

遇到了同样的问题 而且相当逗比 ，手机调试可以滚动，电脑调试的就不行

Answer 3

遇到了同样的问题，先排除了是dom渲染延迟导致获取不到高度的可能性了，不知道是否是插件的bug还是不知道什么原因,在使用better-scroll时要保证被包裹的子元素的告诉大于父元素的高度，所以只需要给你的父级元素添加一个高度，同时父级元素设置为fixed定位，然后在设置overflow为hidden就行了类似这样

    <div class="mc-coon">
        <mc-scroll ref="scroll" class="recommend-content" :data="playList">
                <div class="被包裹的内容">
                    ......        
                </div>
        </mc-scroll>
    </div>

.mc-coon
    position:fixed
    width:100%
    top:88px
    bottom:0
    .recommend-content
            height:100%
            overflow:hidden

Answer 4

给个小建议，其实我们没有必要在每次数据请求成功之后再去手动调用initScroll方法。我们完全可以将滚动条抽离出来成为scroll子组件，然后在父组件里将数据data通过props传递给scroll子组件，然后我们在scroll子组件里watch这个props,当prop更新的时候，watch方法里就调用better-scroll的refresh方法。这样的话，每次当数据更新的时候，子组件就会自动刷新，不需要手动调用刷新方法了。我最近也写了一个基于Vue2.0的仿QQ项目，就是这样实现的，非常方便。你可以参考一下，项目源码地址：https://github.com/lensh/vue-qq。

Answer 5

我在用这个插件的时候，也遇到了类似的问题。

在better scroll 在初始化的时候，会把目标dom的第一个子dom设置一些属性，要确保有一个可操作的空子dom来让插件初始化。

<div class="scroll" ref="scroll">
      <ul>
        <div>
            someting
        </div>
      <ul>
</div>        

渲染后会变成

<div class="scroll">
      <ul style="transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); transition-duration: 0ms; transform: translate(0px, 0px) translateZ(0px);">
        <div>
            someting
        </div>
      <ul>
</div>  

所以要有类似ul的标签。

但是我还遇到了在计算属性里面调用不滚动的问题，很奇怪，完全按照可以滚动的代码写，仍然不能滚动，不知道哪里出了问题。

Answer 6

因为dom是异步加载的，这样在this.$nextTick之后执行就行了

Answer 7

我也遇到了这哥问题，better-scroll 这个差距ul 的宽度要大于 包裹住它的宽度才行。这个有问题，小于的时候就滚动不了。

Answer 8

<div class="mainpage">

<div class="wrapper" ref="wrapperScroll">
  <div class="content">
  

同样遇到这个问题，研究了下代码发现要这样处理：例如想要content滚动，在mainpage和content之间要加个div，ref挂在这。content的高度要超过wrapper高度，mainpage要设置overflow： hidden。

.mainpage
position: absolute
width: 100%
top: 0px
bottom: 0px
overflow: hidden
.wrapper

height: 100%
.content

Answer 9

http://www.xiuyuan.info/?cat=9 这里有一篇使用

Answer 10

试试在mounted 钩子函数里初始化better-scroll

Answer 11

题主解决问题了吗，我也遇到了同样的问题，加载遍历的数据不超过父元素不能滚动，但是我如果是滚动加载刷新的话，子元素没有超过父元素的时候也要刷新一下的。