QQ截图20181022125102.png

我们现在开始对上次的代码进行封装,我们上次的代码是截至到我们通过jsonp已经获取到了轮播图的数据array,我们再定义一个轮播图组件即可

首先我们在base下建立一个组件我们将slider组件的模板定义了如下的样子

<template>
<div class="slider" ref="slider">
<div class="slider-group" ref="sliderGroup">
<slot></slot>
</div>
<div class="dots">
<span class="dot" v-for="(item,index) in dot" :key="index" :class="{active:pageIndex===index}"></span>
</div>
</div>
</template>

这个插槽就是起一个占位的作用

我们开始上手写代码,我们定义轮播图组件之前要做这几样事情,首先我们要定义一堆关于轮播图的数据

//定义轮播图的数据

props:{
loop:{
type:Boolean,
default:true
},
autoPlay:{
type:Boolean,
default:true
},
interval:{
type:Number,
default:4000
}

},

定义完成之后我们在钩子中创建几个方法

值得注意的是,由于项目经验,我们在加载这些方法的时候,要定义一个计时器,让他20毫秒进行加载,纯粹经验,不用多问

setTimeout(()=>{

//计算宽
this._setSliderWidth()
//计算点
this._initDots()
//初始化轮播图
this._initSlider()
//自动播放
if(this.autoPlay){
this._autoPlay()
}

},20)

首先我们先计算宽的方法

值得注意的是,我们在写轮播图组件的时候,要自动添加类名匹配到组件中的css样式,所以我们不仅要计算宽,还要动态添加类名

_setSliderWidth(resize){

//设置轮播图的宽
//获取子元素对象
this.children=this.$refs.sliderGroup.children
//设置宽度
let width=0;
//获取父级的宽度
let sliderWidth=this.$refs.slider.clientWidth;
for(let i=0;i<this.children.length;i++){

//给每个元素添加class类名
let childDom=this.children[i];
//调用公共dom方法
addClassName(childDom,"slider-item");
//设置宽度
childDom.style.width = sliderWidth + 'px';
//父级窗口随着递增
width+=sliderWidth;
}
//如果是loop循环,为了切换效果,需要2倍宽度
if(this.loop && !resize){
width += 2*sliderWidth;
}
this.$refs.sliderGroup.style.width=width + 'px'
},

这个方法的思路是,首先获取了父级窗口的宽度,然后通过循环子对象的个数,把父级的宽度设置给子元素,然后在循环的末尾,要自加一个width,等到循环结束之后,
这个width的值会是所有的子元素的宽总和,然后最后会把这个总和附给我们的视口总宽度。

值得注意的是我们这边添加class类名的方法,在common下添加了一个有关于dom操作的js封装。

这个封装主要是2部分,一个是添加class类名,一个是判断有没有class名字

/**

  • 用于添加dom的公用js
    */

export function addClassName(el,className){

//如果有这个class
if(hasClassName(el,className)){
//什么都不做
return

}

let newClass = el.className.split(' ')
newClass.push(className)
el.className = newClass.join(' ')

}
//判断是否有class的方法
export function hasClassName(el,className){
//创建正则表达式
let reg=new RegExp('(^|\s)'+className+'(\s|$)');
return reg.test(el.className);
}

这个动态添加类名的思路是,把他们全部拆分成数组,空格隔开,因为可能实际代码中还有其他的类名。不能和他们冲突,所以push新的类名,
然后再把它join进字符串中,就完成了添加类名的操作

值得注意的是,如果我们有loop循环的数据的话我们需要×2

注意一下,需要在组件中自己定义css样式

.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%

这个时候我们就可以看一下效果,发现所有的img都是很合理的展示出来了

然后我们展示出来以后,需要能够左右滑动,我们这个时候就用到了better-scroll这个插件,所以我们需要安装它

然后在钩子中定义一个初始化轮播图的方法

//轮播图初始化
this.slider=new BScrool(this.$refs.slider,{
//传递参数配置
//横向滚动
scrollX:true,
scrollY:false,
//惯性
momentum:false,
snap:true,
snapLoop:this.loop,
snapThreshold:0.3,
snapSpeed:400,
click:true
})

然后就可以横向滚动无缝连接了

然后剩下的这个小点点,我们可以通过下面的方法实现,首先循环轮播图的个数来循环span标签

_initDots(){
this.dot=new Array(this.children.length);
},

这样就就可以循环长度了,这个时候就可以看到点了

循环之后,我们就开始可以做自动播放了

首先自动播放的原理就是,延时器+自增数字就可以做

首先我们定义一个data数字属性为0

_autoPlay(){
let pageIndex = this.pageIndex+1;

if(this.loop){
    pageIndex += 1
}

this.timer = setTimeout(()=>{
this.slider.goToPage(pageIndex , 0 ,400)
},this.interval)
}

这边我们做了一个判断,如果是循环播放的话,那么就自加一
因为betterscroll在初始化的时候会增加多一页,要把第一页跳过。

然后定义一个定时器timer,使用了betterscroll中的一个方法,跳转页数,pageIndex是跳转到第几页,0指的是x轴,400指的是速度
我们跟初始化的速度参数保持一致都是400;
然后延时时间是定义的数据interval。

然后我们会发现在循环第一次的时候就不会有第二次了,这个是因为页面被挂载的时候autoplay方法只执行了一次。

解决方案是这样的:

在我们初始化轮播图后面写方法,因为在即将进入下一页的时候会派发一个事件,我们可以监听这个事件来做一些逻辑

this.slider.on('scrollEnd',()=>{
//pageX是横向滚动的索引

let ApageIndex = this.slider.getCurrentPage().pageX
if(this.loop){
//因为自动会给第一个拷贝到最后一个形成轮播图,所以这里要减一
ApageIndex -= 1

}

this.pageIndex=ApageIndex
if(this.autoPlay){
clearTimeout(this.timer)
this._autoPlay();
}

})

这里我们通过betterscroll的api来获取索引,然后把这个索引附给pageIndex,然后然后清除计时器,这个再重新执行自动播放的方法

为什么要清除计时器,因为如果在即将进入下一页的时候,我们人工手滑一下,就直接造成轮播图滚动异常,所以要每次清除。

现在我们的自动播放已经完成了,现在就改操作,这个点了,如果让他滚动到哪里,那个点就放大呢??

这个其实非常简单,我们只需要绑定一个class动态属性即可。

<span class="dot" v-for="(item,index) in dot" :key="index" :class="{active:pageIndex===index}"></span>

然后就大功告成。

但是还没有完毕,我们如果调整一下视口的宽度,会发现轮播图不会适应窗口了,那么该如何解决这个bug?

//监听视口宽度
window.addEventListener('resize',()=>{
//如果slider还没被初始化,就返回掉
if(!this.slider){
return
}
this._setSliderWidth(false)
})

通过监听视口宽度,来重新计算我们的宽度,那么为什么要传递一个false,那是因为我们计算宽度的时候由于是loop循环
要把宽×2,如果每次改变视口宽度,就一致要把宽×2,这样显然是不合适的,所以我们要通过一个参数来判断。

我们在宽度计算的方法中传递一个参数,如果这个参数不是false,那我们就可以×2

if(this.loop && !resize){

width += 2*sliderWidth;

}

标签: none

添加新评论