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

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

clipboard.png

clipboard.png

回答:

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

回答:

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

回答:

遇到了同样的问题,先排除了是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

回答:

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

回答:

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

在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的标签。

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

回答:

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

回答:

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

回答:

<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

回答:

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

回答:

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

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注