vue利用better

网友投稿 284 2023-03-25


vue利用better

前言

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 代码如下:

注意点:

slider组件的父元素必须给他一个100%的宽度且定义overflow:hidden,否则整个页面会被撑开,整个页面都能横向滚动

scroll组件在引用时必须给他一个固定高度。只有拥有固定高度才会发生滚动。

效果图如下:

总结

以上就是这篇文章的全部内容了,本文还有许多不足,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对我们的支持。


版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:app开发接口(软件开发接口)
下一篇:spring mvc 读取xml文件数据库配置参数的方法
相关文章

 发表评论

暂时没有评论,来抢沙发吧~