better-scroll 在vue中使用
引入better-scroll
首先npm install better-scroll,然后在vue组件中,或者全局main.js中,下面是在组件中引入
import BScroll from 'better-scroll'
模板template文件
注意,在ratings-wrapper包裹里面要有一个div,better-scroll 默认只渲染第一个元素,所以要把内容都包裹起来
<template>
<div class="ratings-wrapper" ref="ratingsScroll">
<div>
<h1 style="font-size: 30px;height: 100px">sdsfd</h1>
<h1 style="font-size: 30px;height: 100px">sdsfd</h1>
<h1 style="font-size: 30px;height: 100px">sdsfd</h1>
<h1 style="font-size: 30px;height: 100px">sdsfd</h1>
<h1 style="font-size: 30px;height: 100px">sdsfd</h1>
<h1 style="font-size: 30px;height: 100px">sdsfd</h1>
<h1 style="font-size: 30px;height: 100px">sdsfd</h1>
<h1 style="font-size: 30px;height: 100px">sdsfd</h1>
<h1 style="font-size: 30px;height: 100px">sdsfd</h1>
<h1 style="font-size: 30px;height: 100px">sdsfd</h1>
<h1 style="font-size: 30px;height: 100px">sdsfd</h1>
<h1 style="font-size: 30px;height: 100px">sdsfd</h1>
<h1 style="font-size: 30px;height: 100px">sdsfd</h1>
<h1 style="font-size: 30px;height: 100px">sdsfd</h1>
<h1 style="font-size: 30px;height: 100px">sdsfd</h1>
<h1 style="font-size: 30px;height: 100px">sdsfd</h1>
</div>
</div>
</template>
methods中定义一个方法
methods: {
_initScroll () {
this.ratingsScroll = new BScroll(this.$refs.ratingsScroll, {
click: true
})
}
}
调用即可
这里注意$nextTick的使用,至于为什么,自己百度一下下,重要!
created () {
this.$nextTick(() => {
this._initScroll()
})
},