better-scroll的使用

2019/12/26 12:39
阅读数 2.5K

首先下载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, //点击
        pullUpLoad: 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,才能点击事件。

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部