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 }) }
然后就解决了,可以正常滚动。