Home > Article > Web Front-end > vue uses better-scroll to implement carousel images and page scrolling
在我们日常的项目开发中,处理滚动和轮播图是再常见不过的需求了,本文主要和大家介绍了关于vue利用better-scroll实现轮播图与页面滚动的相关资料,文中给出了详细的示例代码供大家参考学习,需要的朋友们下面来一起看看吧。
前言
better-scroll 也很强大,不仅可以做普通的滚动列表,还可以做轮播图、picker 等等...所以本文主要给大家介绍了关于vue用better-scroll实现轮播图与页面滚动的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧。
1.安装better-scroll
在根目录中package.json的dependencies中添加:
"better-scroll": "^0.1.15"
然后 npm i 安装。
2.封装代码
将better-scroll封装成两个基础组件slider和scroll放于src/base文件夹中。
slider.vue 代码
该代码引用common/js/dom.js中的addClass()方法为每个轮播图添加一个slider-item类,dom.js代码如下:
export function hasClass (el, className) { // 开始或空白字符+类名+空白字符或结束 let reg = new RegExp('(^|\\s)' + className + '(\\s|$)') // 测试元素是否有该类名,返回布尔值 return reg.test(el.className) } export function addClass (el, className) { if (hasClass(el, className)) { return } // 以空白符为切割位置切割生成新数组 let newClass = el.className.split(' ') // 数组中加入新类名 newClass.push(className) // 将数组元素放入一个字符串,以空白符间隔 el.className = newClass.join(' ') }
scroll.vue代码
3.使用封装组件
使用这两个组件的页面组件home.vue 代码如下:
- {{item}}
注意点:
slider组件的父元素必须给他一个100%的宽度且定义overflow:hidden,否则整个页面会被撑开,整个页面都能横向滚动
scroll组件在引用时必须给他一个固定高度。只有拥有固定高度才会发生滚动。
效果图如下:
相关推荐:
关于JQuery和html+css实现带小圆点和左右按钮的轮播图分享
The above is the detailed content of vue uses better-scroll to implement carousel images and page scrolling. For more information, please follow other related articles on the PHP Chinese website!