Vue项目自定义轮播图基础组件

Vue项目自定义轮播图基础组件 因为不会封装所以学习一下,记录一下 1.先创建一个slider.vue组件,这个是写好的文件

@import '~common/stylus/variable'; .slider { min-height: 1px; .slider-group { position: relative; overflow: hidden; white-space: nowrap; .slider-item { float: left; box-sizing: border-box; overflow: hidden; text-align: center; a { display: block; width: 100%; overflow: hidden; text-decoration: none; }img { display: block; width: 100%; } } }.dots { position: absolute; right: 0; left: 0; bottom: 12px; text-align: center; font-size: 0; .dot { display: inline-block; margin: 0 4px; width: 8px; height: 8px; border-radius: 50%; background: $color-text-l; &.active { width: 20px; border-radius: 5px; background: $color-text-ll; } } } }

2.接下来是分析的过程
轮播图的大概原理 Vue项目自定义轮播图基础组件
文章图片

在其他组件中的使用(recommend.vue)
Vue项目自定义轮播图基础组件
文章图片
export default { data(){ return { recommends:[]//获取来的数据 } } }

如何写一个自定义功能的代码呢?先分析常规的轮播图的需求:1、自动轮播,2、循环轮播,3、播放时长 这里是用的better-scroll插件进行的轮播控制
js部分代码
//首先得知道,在什么时候初始化scroll,首先得知道better-scroll初始化时机为组件渲染完毕,在mounted这个钩子函数里面进行 import {addClass} from 'common/js/dom.js'' import BScroll from 'better-scroll' mounted(){ //保证DOM成功渲染加个延时,浏览器通常13ms刷新一次 setTimeout(() =>{ this._setSliderWidth() this._initSlider() },20) }, methods:{ //横向滚动初始化scroll之前,需要设置slider得宽度, /*先给两个节点添加引用 ref div class="slider" ref="slider">*/ _setSliderWidth(){ //先获得sliderGroup.childrensliderGroup是DOM元素 this.children = this.$refs.sliderGroup.children //设置sliderGroup的宽度 let width = 0 //先去获取sliderGorup父亲的宽度 let sliderWidth = this.$refs.slider.clintWidth //每个sliderGroup的子元素的宽度都是一致的所以去for循环去遍历他 for(let i=0; i

【Vue项目自定义轮播图基础组件】在common/js/DOM.js中编写代码
export function hasClass(el,className){ /*new RegExp(pattern, attributes); 参数 pattern 是一个字符串,指定了正则表达式的模式或其他正则表达式。 参数 attributes 是一个可选的字符串,包含属性 "g"、"i" 和 "m",分别用于指定全局匹配、区分大小写的匹配和多行匹配。ECMAScript 标准化之前,不支持 m 属性。如果 pattern 是正则表达式,而不是字符串,则必须省略该参数。*/ let reg = new RegExp('(^|\\s)' + className + '(\\s|$)') /*test() 方法用于检测一个字符串是否匹配某个模式. 如果字符串 string 中含有与 RegExpObject 匹配的文本,则返回 true,否则返回 false。*/ return reg.test(el.className) }export function addClass(el,className){ if(hasClass(el,className)){ return } let newClass = el.className.split(' ') newClass.push(className) //先把它拆成一个数组,再把它添加进去,在用join连起来 el.className = newClas.join() }

    推荐阅读