一、注意事项：
使用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>
三、 相关资料：
*本文版权归本人即简书笔名：该账户已被查封 所有，如需转载请注明出处。谢谢!
网友评论