better-scroll手机模式下刷新才能滚动
可以实现下拉刷新、上拉刷新、吸顶操作、防止回弹等效果。
1、安装better-scroll
npm install better-scroll --save
2、引入
import BScroll from ‘better-scroll’
3.下面是实现的最普通的滚动,只是一个例子:
<div class="wrapper" ref="wrapper">
<ul class="content">
<li>3</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
...
</ul>
</div>
mounted(){
mounted() {
const options = {
probeType:3,
bounce:false,
click:true,
mouseWheel: true,//开启鼠标滚轮,
// disableTouch: false
};
this.$nextTick(() => {
this.betterScroll = new BScroll(this.$refs.wrapper, options)
console.log( this.betterScroll);
this.betterScroll.on('scroll',(pos)=>{
console.log("滚动了");
console.log(pos);
})
.wrapper{
width: 100vw;
height: 100vh;// 一定要给父容器固定高度,让子元素超过其高度。
}
可以参照这位大佬文章:地址