当前位置: 首页 > 工具软件 > BetterScroll > 使用案例 >

JS----Better Scroll的使用

漆雕育
2023-12-01

我们在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

 类似资料: