JS----Better Scroll的使用

我们在app中使用原生滚动框的时候会发生卡顿的问题，并且如果需要上拉加载、下拉刷新等功能的时候，需要我们自己监听js事件，很不方便，这个时候使用better-scroll就会很方便的实现这一系列的功能。

下载js文件

better-scroll

定义滚动区域

在使用滚动框的时候我们需要定义一个滚动区域，当内容小于滚动区域的时候，不会发生滚动，当内容大于滚动区域的时候就会发生滚动。
注意：better-scroll 只处理容器（wrapper）的第一个子元素（content）的滚动，其它的元素都会被忽略

//示例html代码：
<div id="wrapper" style="overflow:hidden;height:400px;">
	<tag></tag>
</div>
//示例js代码：
<script>
	let wrapper = document.getElementById("wrapper")
	let bs = BetterScroll.createBScroll(wrapper ,{
    
    })
</script> 

createBScroll

createBScroll的第二个参数：
createBScroll的第二个参数是一个对象，我们需要使用Better Scroll的功能时就需要在这里面定义

下拉刷新功能

//示例代码：
<script>
	let wrapper = document.getElementById("wrapper")
	let bs = BetterScroll.createBScroll(wrapper, {
    
    
	pullDownRefresh:{
    
    
	  threshold: 10,
	  stop: 20
	}
	})
	//下拉刷新..
	bs.on('pullingDown',function(e){
    
    
	        console.log('要开始下拉刷新了')
	        bs.finishPullDown();        //注意完成刷新之后一定要调用此方法，否则下次下拉刷新无效
	})
</script>

上拉加载功能

//示例代码：
<script>
	let wrapper = document.getElementById("wrapper")
	let bs = BetterScroll.createBScroll(wrapper, {
    
    
	        pullUpLoad: {
    
    
	                threshold: 50
	        }
	})
	//上拉加载..
	bs.on('pullingUp',function(e){
    
    
	        console.log('要开始上拉加载了')
	        bs.finishPullUp();    //加载完成需要调用此方法，否则下次上拉加载无效
	})
<script>

点击回到顶部

//示例html代码：
<button onclick="gotop()">回到顶部</button>
//示例js代码：
function gotop(){
    
    
        bs.scrollTo(0,0)
}

原文：https://www.jianshu.com/p/1cc4b47a715a