better-scroll的使用
Posted lyt0207
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了better-scroll的使用相关的知识，希望对你有一定的参考价值。
首先下载better-scroll插件，地址：https://github.com/ustbhuangyi/better-scroll
（vue项目的话也可以通过npm install better-scroll --save安装）
引入bscroll.js
然后通过new BScroll调用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.wrapper {
height: 200px;
background: red;
overflow: hidden;
font-size: 50px;
}
</style>
</head>
<body>
<div class="wrapper">
<ul class="content">
<div class="btn">按钮</div>
<!--<button class="btn">anniu</button>-->
<li>分类列表</li>
<li>分类列表</li>
<li>分类列表</li>
<li>分类列表</li>
<li>分类列表</li>
<li>分类列表</li>
<li>分类列表</li>
<li>分类列表</li>
<li>分类列表</li>
<li>分类列表</li>
<li>分类列表</li>
<li>分类列表</li>
<li>分类列表</li>
<li>分类列表</li>
<li>分类列表</li>
<li>分类列表</li>
<li>分类列表</li>
<li>分类列表</li>
<li>分类列表</li>
<li>分类列表</li>
<li>分类列表</li>
<li>分类列表</li>
<li>分类列表</li>
<li>分类列表</li>
<li>分类列表</li>
<li>分类列表</li>
<li>分类列表</li>
<li>分类列表</li>
<li>分类列表</li>
<li>分类列表</li>
<li>分类列表</li>
<li>分类列表</li>
<li>分类列表</li>
<li>分类列表</li>
<li>分类列表</li>
<li>分类列表</li>
<li>分类列表</li>
<li>分类列表</li>
<li>分类列表</li>
<li>分类列表</li>
<li>分类列表</li>
<li>分类列表</li>
<li>分类列表</li>
<li>分类列表</li>
<li>分类列表</li>
<li>分类列表</li>
<li>分类列表</li>
<li>分类列表</li>
<li>分类列表</li>
<li>分类列表</li>
<li>分类列表</li>
<li>分类列表</li>
<li>分类列表</li>
<li>分类列表</li>
<li>分类列表</li>
<li>分类列表</li>
<li>分类列表</li>
<li>分类列表</li>
<li>分类列表</li>
<li>分类列表</li>
<li>分类列表</li>
<li>分类列表</li>
<li>分类列表</li>
<li>分类列表</li>
<li>分类列表</li>
<li>分类列表</li>
<li>分类列表</li>
<li>分类列表</li>
<li>分类列表</li>
<li>分类列表</li>
<li>分类列表</li>
<li>分类列表</li>
<li>分类列表</li>
<li>分类列表</li>
<li>分类列表</li>
</ul>
</div>
</body>
<script src="bscroll.js"></script>
<script>
// probeType: 0,1都是不侦测实时位置，2是在手指滚动的过程中监测，手指离开后的惯性滚动过程不监测，3是只要滚动，都监测
let bscroll = new BScroll(‘.wrapper‘, {
probeType: 3,
click: true, //点击
pullingUp: true //上拉加载更多
})
//监听滚动位置 默认情况下BScroll 是不可以监听滚动位置的，只有在初始化的时候设置了probeType才可以监听
bscroll.on(‘scroll‘, function (position) {
console.log(position)
})
bscroll.on(‘pullingUp‘, function () {
console.log(‘上拉加载更多‘);
//发送网络请求，请求更多页的数据
//等请求完成，进行数据展示
//调用finishiPullUp()表示本次上拉加载完成，可以进行下次上拉加载更多，不调用这个的话，默认只能由一次上拉加载更多
setTimeout(function () {
bscroll.finishPullUp()
},2000)
})
//click事件
document.querySelector(‘.btn‘).addEventListener(‘click‘, function () {
console.log(‘>>>>>>>>>>>‘)
})
</script>
</html>
把要滚动的内容放在wrapper里面包裹起来，要给最外层的div一个固定高度，设置超出部分隐藏，overflow: hidden;只有当内容超过了最外层div的高度时才会滚动，最长用的就是监听滚动位置，上拉加载更多，以及点击事件，特别需要注意的是，点击事件，BetterScroll 默认会阻止浏览器的原生 click 事件。当设置为 true，BetterScroll 会派发一个 click 事件，亲测当点击的元素是button时，并不会阻止点击事件，但是当点击的是div元素的时候，必须要设置click 为true，才能点击事件。
以上是关于better-scroll的使用的主要内容，如果未能解决你的问题，请参考以下文章