vue使用better-scroll 无法滚动


npm install better-scroll --save-dev  下载了这个插件

在页面里  import BScroll from 'better-scroll'  引入了这个插件

在template里

<div class="sin">
    <div class="wrapper" ref="singerList">
      <div class="content">
         内容取
       </div>
    </div>
 </div>

css里:

.singer {
  position: absolute;
  width: 100%;
  top: 60px;
  bottom: 0;
}
.wrapper {
  height: 100%;
  overflow: hidden;
}
.content {
  height: auto;
}

在方法里面:

 mounted() {
    this.getSingerData()  //获取数据的方法

    //实例化
    const wrapper = document.querySelector('.wrapper')
    const scroll = new BScroll('.wrapper', {
      click: true
    })
  },

感觉什么都没有错,但是就是不滚动,后来百度发现,说是因为加载这个插件的时候,dom还没有加载,所以造成了无法滚动;

看不懂别人是怎么写的,我就想到了vue里面的周期函数:后来改成了

  mounted() {
    this.getSingerData()
  },
  updated() {
    const wrapper = document.querySelector('.wrapper')
    const scroll = new BScroll('.wrapper', {
      click: true
    })
  }

然后就解决了,可以正常滚动。

 

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM