better-scroll 也很强大,不仅可以做普通的滚动列表,还可以做轮播图、picker 等等...所以本文主要给大家介绍了关于vue用better-scroll实现轮播图与页面滚动的相关内容，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍吧。
在根目录中package.json的dependencies中添加：
然后 npm i 安装。
将better-scroll封装成两个基础组件slider和scroll放于src/base文件夹中。
slider.vue 代码
该代码引用common/js/dom.js中的addClass()方法为每个轮播图添加一个slider-item类，dom.js代码如下：
scroll.vue代码
注意点：
slider组件的父元素必须给他一个100%的宽度且定义overflow:hidden，否则整个页面会被撑开，整个页面都能横向滚动 scroll组件在引用时必须给他一个固定高度。只有拥有固定高度才会发生滚动。
效果图如下：
以上就是这篇文章的全部内容了，本文还有许多不足，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对编程之家的支持。
原文链接：https://www.f2er.com/vue/35687.html