身为Vue迷，手机软件开发通常有个小坎儿：如何做出滑动够顺溜的页面？今天跟大家聊聊Vue里怎么搞定这事儿，希望能帮到在纠结Vue项目这个问题的小伙伴们！
一、为何选择better-scroll
npm install better-scroll --save
我最爱用的滚动插件就是better-scroll！首先，这个插件速度超快，功能也强大得不得了，无论是列表滚动还是轮播图，都能搞定。而且它的社区很好，有啥不懂的，问一下就有人回答，连问题都不用自己想办法解决。
二、安装与基本配置
装载better-scroll很容易的，用npm一下就搞定了。导入这块小部件之后，我会在组件挂载时初始化它，这是因为他要在DOM完全刷好了以后才可以正确地获取滚动元素的尺寸哈。
import BScroll from ‘better-scroll'
三、template中的DOM引用
在Vue模板里，我直接用ref来操作要滚动的那几个DOM元素。这样的话，我就能在Vue组件的methods里通过$refs去找到它们了，然后启动better-scroll的初始化过程。
四、_initScroll方法的实现
我在methods里弄了个_initScroll方法来搞定better-scroll，只要传给它一个通过ref指向的DOM元素就行！然后，我就在这儿设置一下better-scroll的各种属性，比如怎么滚动，滚动得快还是慢什么的。
五、数据加载与滚动初始化
因为Vue加载新数据有点慢，要是没有等到所有数据看完就开始用better-scroll，那滚动起来肯定没那么顺畅。所以，要等所有的数据都成功加载完之后，我们才会去启动这个_initScroll函数。这怎么做到？就是用Vue里的$nextTick功能，这样就能保证在页面更新好之后再去初始化。
六、处理异步数据加载
methods: {
_initScroll(){
this.menuScroll = new BScroll(this.$refs.menuWrapper, {})
this.foodsScroll = new BScroll(this.$refs.foodsWrapper, {})
}
}
}
搞定异步数据加载的时候，我发现了个小麻烦，就是数据虽然加载好了，但是，DOM可能没跟上节奏，还没更新好。为了解决这事儿，我就学会了用$nextTick，在它的回调里给better-scroll初始化，这样就能保证，只要DOM更新完了，scroll就能准确知道它现在的大小。
七、实战案例分析
在做一个手机上的新东西时，得安装一下better-scroll这个插件，让新闻列表能顺畅的滑动起来。安好后，还发现可以根据屏幕大小来动态调节插件设置，用起来更顺手。
八、遇到的问题与解决
其实我遇到过一些麻烦，就像滚动条没法出现，滑动起来不顺溜啥的。不过，看了好多资料还有大家帮我解决问题后，现在我都能搞定！这些经验真的让我更懂better-scroll是怎么运作的，以及怎么用得更好。
九、总结与展望
说实话，从这次实践中学到不少东西！以后用vue做移动端scroll滚动就更顺手。现在看来，更好的滚动工具应该还有很多待开发的潜力。我觉得在今后的项目中可以多试试这个工具，肯定能给用户带来更棒的滑动体验。
快来聊聊！读完了就和我们说说你们用better-scroll时遇到了啥困难，是怎么搞定的？别害羞，大胆地在评论区分享你们的故事！还有，如果觉得这篇文章帮到忙了，点个赞再分享出去，让更多的小伙伴们受益
评论0