vue利用better-scroll实现轮播图与页面滚动详解
前言better-scroll 也很强大,不仅可以做普通的滚动列表,还可以做轮播图、picker 等等...所以本文主要给大家介绍了关于vue用better-scroll实现轮播图与页面滚动的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧。 1.安装better-scroll在根目录中package.json的dependencies中添加: 然后 2.封装代码将better-scroll封装成两个基础组件slider和scroll放于src/base文件夹中。 slider.vue 代码 该代码引用common/js/dom.js中的addClass()方法为每个轮播图添加一个slider-item类,dom.js代码如下: 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组件在引用时必须给他一个固定高度。只有拥有固定高度才会发生滚动。 效果图如下: 总结以上就是这篇文章的全部内容了,本文还有许多不足,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对编程之家的支持。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |