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

一、注意事项：

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

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

二、简单例子：

    
    
    


    

        https://unpkg.com/[email protected]/dist/bscroll.min.js
        
 https://unpkg.com/[email protected]/dist/bscroll.min.js
        
 https://unpkg.com/[email protected]/dist/bscroll.min.js
        
 https://unpkg.com/[email protected]/dist/bscroll.min.js
        
 https://unpkg.com/[email protected]/dist/bscroll.min.js
        
 https://unpkg.com/[email protected]/dist/bscroll.min.js
        
 https://unpkg.com/[email protected]/dist/bscroll.min.js
        
 https://unpkg.com/[email protected]/dist/bscroll.min.js
        
 https://unpkg.com/[email protected]/dist/bscroll.min.js
        
 https://unpkg.com/[email protected]/dist/bscroll.min.js
        
 https://unpkg.com/[email protected]/dist/bscroll.min.js
        
 https://unpkg.com/[email protected]/dist/bscroll.min.js
        
 https://unpkg.com/[email protected]/dist/bscroll.min.js
        
 https://unpkg.com/[email protected]/dist/bscroll.min.js
        
 https://unpkg.com/[email protected]/dist/bscroll.min.js
        
 https://unpkg.com/[email protected]/dist/bscroll.min.js
        

    



    
    

三、 相关资料：

1、官方文档
2、github地址

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