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
    })
  }

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

 

 
posted @ 2018-08-10 15:59  adongP  阅读(5519)  评论(2编辑  收藏  举报