better-scroll的使用

2024-02-24 19:38:04

首先下载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，才能点击事件。

码农公寓

相关文章