前言
better-scroll 也很强大,不仅可以做普通的滚动列表,还可以做轮播图、picker 等等...所以本文主要给大家介绍了关于vue用better-scroll实现轮播图与页面滚动的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧。
1.安装better-scroll
在根目录中package.json的dependencies中添加:
rush:plain;">
"better-scroll": "^0.1.15"
然后 npm i
安装。
将better-scroll封装成两个基础组件slider和scroll放于src/base文件夹中。
slider.vue 代码
rush: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(' ')
}