使用better-scroll注意事项及简单示例

一、注意事项：

使用better-scroll一定要保证
1、父元素（包裹元素，如果用的是scroll组件则是<scroll></scroll>）的高度或宽度没有子元素（被包裹的第一个子元素）大；
2、父元素（包裹元素，如果用的是scroll组件则是<scroll></scroll>）需要使用overflow: hidden;；
3、当子元素的内容存在异步加载的情况或者滚动相关组件在隐藏（display:none）状态下发生了变化的情况时，记得使用refresh刷新（使用refresh方法时需要记得延时20ms执行。因为浏览器刷新需要一定的时间）；
4、当出现了scroll组件滚不到最后一个元素时（v-for遍历后的最后的一个元素）应该检查：
a、在vue中是否使用了<transition-group> 等标签，使用了的话记得在scroll组件上使用类似如 :refreshDelay="refreshDelay" 等属性来控制列表数据变更后延迟刷新列表；（transition一般为零点几秒因此相应的refreshDelay可为几百数值）
b、 v-for遍历后的元素是否使用了margin，有时候需要转换成padding

5、滚动只作用被包裹的第一个子元素。
以上如果没有注意的话就可能出现滚不动的情况。

二、简单例子：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    .out {
        height: 200px; // 父元素.out高度没有子元素的第一个元素.in大
        overflow: hidden; //这句别忘记了
        border: 1px solid red;
    }

    .in {
        height: 200%; //子元素的高度明显大于父元素
        border: 1px solid black;
    }
    </style>
</head>
<div class="out">
    <div class="in">
        https://unpkg.com/better-scroll@1.0.1/dist/bscroll.min.js
        <br> https://unpkg.com/better-scroll@1.0.1/dist/bscroll.min.js
        <br> https://unpkg.com/better-scroll@1.0.1/dist/bscroll.min.js
        <br> https://unpkg.com/better-scroll@1.0.1/dist/bscroll.min.js
        <br> https://unpkg.com/better-scroll@1.0.1/dist/bscroll.min.js
        <br> https://unpkg.com/better-scroll@1.0.1/dist/bscroll.min.js
        <br> https://unpkg.com/better-scroll@1.0.1/dist/bscroll.min.js
        <br> https://unpkg.com/better-scroll@1.0.1/dist/bscroll.min.js
        <br> https://unpkg.com/better-scroll@1.0.1/dist/bscroll.min.js
        <br> https://unpkg.com/better-scroll@1.0.1/dist/bscroll.min.js
        <br> https://unpkg.com/better-scroll@1.0.1/dist/bscroll.min.js
        <br> https://unpkg.com/better-scroll@1.0.1/dist/bscroll.min.js
        <br> https://unpkg.com/better-scroll@1.0.1/dist/bscroll.min.js
        <br> https://unpkg.com/better-scroll@1.0.1/dist/bscroll.min.js
        <br> https://unpkg.com/better-scroll@1.0.1/dist/bscroll.min.js
        <br> https://unpkg.com/better-scroll@1.0.1/dist/bscroll.min.js
        <br>
    </div>
</div>

<body>
    <script type="text/javascript" src='https://unpkg.com/better-scroll@1.0.1/dist/bscroll.min.js'></script>
    <script type="text/javascript">
    console.log(BScroll);
    let wrapper = document.querySelector('.out')
    let scroll = new BScroll(wrapper)
    </script>
</body>

</html>

三、相关资料：

1、官方文档
2、github地址

*本文版权归本人即简书笔名：该账户已被查封所有，如需转载请注明出处。谢谢!

最后编辑于：2017.12.10 06:41:19

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

使用better-scroll注意事项及简单示例