一.用法
1.首先要安装better-scroll:
npm install better-scroll --save
然后在项目中引入它:
import BScroll from ‘better-scroll’
2.使用
html:
<template>
<div class="content">
<div class="left" ref="left">//滑动的外层容器
<ul>//滑动包含的内容
<li>1</li>
<li>2</li>
<li>1</li>
<li>2</li>
<li>1</li>
<li>2</li>
<li>1</li>
<li>2</li>
<li>1</li>
<li>2</li>
<li>1</li>
<li>2</li>
<li>1</li>
<li>2</li>
<li>1</li>
<li>2</li>
<li>1</li>
<li>2</li>
<li>1</li>
<li>2</li>
<li>1</li>
<li>2</li>
<li>1</li>
<li>2</li>
<li>1</li>
<li>2</li>
<li>1</li>
<li>2</li>
<li>1</li>
<li>2</li>
<li>1</li>
<li>2</li>
<li>1</li>
<li>2</li>
<li>1</li>
<li>2</li>
<li>1</li>
<li>2</li>
<li>1</li>
<li>2</li>
</ul>
</div>
</div>
</template>
js:
<script>
import BScroll from 'better-scroll';
export default {
data () {
return {};
},
mounted () { //BScroll的实例化要放在mounted里面,要保证在dom节点挂载后再实例化
this.$nextTick(() => {
this.scroll = new BScroll(this.$refs.left, {
click: true
});
console.log(this.scroll);
});
}
};
</script>
css:
这里要对css进行设置
<style scoped>
.content {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.left {
width: 30%;
height: 100%;
}
</style>
二.better-scroll不能滚动检查原因:
1.是否是因为better-scroll没有引入成功
2.是否是在mounted里面实例化
3.滑动内容的高度是否大于外层的高度(通过审查元素console.log(this.scroll),看是否wrapperHeight< scrollHeight,hasVerticalScroll为true;那如果这些数据不对,检查是否dom没有更新完就初始化BScroll了,要等dom更新完才能初始化)
4.是否正确的设置css:.content, .left等等