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

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

因为不会封装所以学习一下，记录一下

1.先创建一个slider.vue组件，这个是写好的文件

2.接下来是分析的过程

轮播图的大概原理

在其他组件中的使用(recommend.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.children   sliderGroup是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<this.children.length;i++){
			//先获取到每一个子元素
			let child = this.children[i]
			//给child添加样式，这个DOM比较常用，所以封装到另一个文件中，看下面的DOM代码
			addClass(child,'slider-item')//看下面代码
			//设置每个child的宽度
			child.style.width = slideWidth +'px'
			width+=sliderWidth
		}
		if(this.loop){
			width +=2*slideWidth
		}
		this.$refs.sliderGroup.style.width = width +'px'
	},
	//初始化slider
	_initSlider(){
		this.slider = new BScroll(this.$refs.slider,{
			 scrollX:true,
              scrollY:false,
              momentum:false,
              snap:true,
              snapLoop:this.loop,
              snapThreshold:0.3,
              snapSpeed:400,
              click:true
		})
	}
}

在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()
}