better-scroll的使用

2019-12-26 12:53:09 阅读：307 来源： 互联网

标签：滚动分类列表 better 点击 scroll 使用 click 上拉

首先下载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,使用,click,上拉
来源： https://www.cnblogs.com/lyt0207/p/12101423.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

better-scroll的使用