better-scroll是什么
1.BetterScroll 是一款重点解决移动端各种滚动场景需求的开源插件,适用于滚动列表、选择器、轮播图、索引列表、开屏引导等应用场景。简而言之,移动端滚动神器。以下简称BS。
2.基于原生js开发,不依赖任何插件,所以既可以原生 JavaScript 引用,也可以与目前流行的前端 MVVM 框架结合使用。
3.目前最好用的移动端滚动插件,没有之一,1.8版本之后PC端也可以使用
阅读本文你可以学到什么
网上有大量的BS配合MVVM使用的案例,所以我这不多说,本系列文章讲的是BS如何配合原生JS使用,考虑到很多公司或企业并没有使用MVVM类框架。
开始使用
1.初始布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Document</title>
<style>
</style>
<style>
body{
margin: 0;
}
body,html{
height: 100%;
}
ul,ol{
list-style: none;
padding: 0;
margin: 0;
}
.con{
width: 100vw;
height: 100vh;
/* 外框一定要设置高度 如果不设置 将没有效果 */
overflow: hidden;
}
/* 横向滑屏 */
ul{
/* width: 150vw; */
}
ul>li{
width: 100%;
height: 40px;
line-height: 40px;
text-indent: 20px;
border-bottom: 1px solid #666666;
color: #333333;
}
.demo{
width: 100%;
height: 100px;
background: hotpink;
}
</style>
</head>
<body>
<div class="con">
<ul class="list">
</ul>
<!-- 没效果或被盖住 不建议这么使用 -->
<div class="demo">
</div>
</div>
</body>
</html>
基础的列表布局完成,那么现在引入BS,此文用的是BS v1.12.1 (CDN)版本,大家使用的时候请务必注意版本号,版本低的可能有些功能不支持
<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/bscroll.min.js"></script>
模拟初始数据
<script>
function getData(){
var list = document.querySelector(".list");
var html = "";
for(var i = 0; i < 30; i++){
html += "<li>我是第"+(i+1)+"个li</li>"
}
list.innerHTML = html;
}
window.onload = () => {
getData();
}
</script>
现在我们刷新页面,能看到的是生成了一个ul列表,但是无法滑动,因为设置了overflow:hidden;
初始化容器
//初始化con
function con(){
var con = document.querySelector(".con");
var bscroll = new BScroll(con,{
//x轴偏移量
// startX: 150,
//y轴偏移量
// startY: 150
//横向是否可以滑屏
scrollX:true,
//纵向是否可以滑屏
scrollY:true,
//缓冲动画
momentum:true
});
//事件
bscroll.on("beforeScrollStart",()=>{
//每次开始滚动的时候
console.log("我要滚动了");
})
}
window.onload = () => {
getData();
con();
}
初始化之后,我们看到系统自带的滚动条已经消失不见了。这个区域还可以正常滑动,那么就是组件生效了
为什么不建议使用原生滚动条,主要有以下几点
- 原生的滚动条可能自带回弹
- 如果有叠层 后面显示不了或显示不全
- 阻止事件穿透只能清除默认事件
FAQ
- BScroll滚动的元素的是当前元素下的第一个子元素(下标为0), 以上案例为.con下的ul。
- 如果在ul下再次添加元素,比如以上案例中class为demo的div,它不仅无法滚动,甚至会被ul覆盖
- 外框(以上案例的con)一定要设置高度,否则无法滚动