官方文档

背景

better-scroll核心为iscroll，但后者的作者已经不维护。所以采用bs也是可以，原生的滚动太过于生硬，且移动端太过于卡顿。

安装

• npm方式
• script加载
• cdn引入

使用

html

wrapper中只能有一个元素

<div class="wrapper">
	<ul class="content">
		<li>3</li>
		<li>3</li>
		<li>3</li>
		<li>3</li>
		<li>3</li>
	</ul>
</div>

js

const bscroll = new BScroll('.wrapper',{
      probeType: 3,
      pullUpLoad: true,
      click: true
})

• probeType：默认0，可选1，2，3
  • 0，1 不检测实时位置
  • 2 手指滑动时触发滚动事件，惯性不触发。
  • 3 不仅滑动时候触发，惯性也触发

bscroll.on('scroll',(position)=>{
	console.log(position)
})

• pullUpLoad 默认false，用于配置上拉加载更多

bscroll.on('pulligUp',()=>{
	console.log("上拉加载更多")
	// 加载网络数据
	
	
	// 2s拉一下，上拉加载一下
	setTimeout(()=>{
		bscroll.finishPullUp()
	})
})

• click 属性设置为true，内部元素button 一开始的点击事件就是可以点击，但是div不可，需要设置true才能被点击

css

.wrapper{
	height: 150px;  //一定要有高度
	overflow: hidden;
}

回到顶部

需要调用scrollTo（x,y,time）

scroll.scrollTo(0,0,500);  500ms向上滚动

问题很多的一个插件。