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