关于better-scroll的初步体验

最新推荐文章于 2023-04-07 20:25:56 发布

落日伏羲

最新推荐文章于 2023-04-07 20:25:56 发布

阅读量152

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/qq_44433209/article/details/115251721

版权

CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

better-scroll

better-scroll 是一款重点解决移动端（现在也支持 PC）各种滚动场景需求的插件。
better-scroll 是基于原生 JS 实现的，不依赖任何框架

简单使用

better-scroll 是作用在外层 content 容器上的，滚动的部分是 ul 里的元素

注意
better-scroll 只处理容器（content）的第一个子元素 ul 的滚动，其他元素不能处理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .content {
            height: 200px;
            background-color: red;
            /*overflow-y: scroll;*/   /*原生方式滚动*/
            overflow: hidden;
        }
    </style>
</head>

<body>

<div>
    <div class="content">
        <ul>
            <button class="btn">按钮</button>
            <li>列表数据1</li>
            <li>列表数据2</li>
            <li>列表数据3</li>
            <li>列表数据4</li>
            <li>列表数据5</li>
            <li>列表数据6</li>
            <li>列表数据7</li>
            <li>列表数据8</li>
            <li>列表数据9</li>
            <li>列表数据10</li>
            <li>列表数据11</li>
            <li>列表数据12</li>
            <li>列表数据13</li>
            <li>列表数据14</li>
            <li>列表数据15</li>
            <li>列表数据16</li>
            <li>列表数据17</li>
            <li>列表数据18</li>
            <li>列表数据19</li>
            <li>列表数据20</li>
        </ul>
    </div>

</div>

<script src="bscroll.js"></script>

<script>
    // 默认情况下bscroll不能实时监听滚动位置
    // probe 侦测
    /** probeType: 0 默认值，即不派发 scroll 事件
     *             1 非实时（屏幕滑动超过一定时间后）派发scroll事件
     *             2 在屏幕滑动的过程中实时的派发 scroll 事件（在手指滚动的过程中侦测，手指离开后的惯性滚动过程中不侦测）
     *             3 不仅在屏幕滑动的过程中，而且在 momentum 滚动动画运行过程中实时派发 scroll 事件
     * */
    const bscroll = new BScroll(document.querySelector('.content'), {
        probeType: 3,
        click: true,
        pullUpLoad: true
    })
    bscroll.on('scroll', (position) => {
        // console.log(position)
    })
    bscroll.on('pullingUp', () => {
        console.log('上拉加载更多');
        // 发送网络请求，请求更多页的数据
        // 等数据请求完成，并且将新的数据展示出来后
        setTimeout(function () {
            bscroll.finishPullUp()
        },2000) //2秒之后才能下次加载
    })

    document.querySelector('.btn').addEventListener('click', function () {
        console.log('--------')
    })
</script>
</body>
</html>

在这里插入图片描述

落日伏羲

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于better-scroll的初步体验

better-scrollbetter-scroll 是一款重点解决移动端（现在也支持 PC）各种滚动场景需求的插件。better-scroll 是基于原生 JS 实现的，不依赖任何框架简单使用better-scroll 是作用在外层 content 容器上的，滚动的部分是 ul 里的元素注意better-scroll 只处理容器（content）的第一个子元素 ul 的滚动，其他元素不能处理<!DOCTYPE html><html lang="en"><he
复制链接

扫一扫

专栏目录