怎么在Vue中使用better-scroll实现轮播图
这篇文章将为大家详细讲解有关怎么在Vue中使用better-scroll实现轮播图，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。
better-scroll 是什么
better-scroll 是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件。它的核心是借鉴的 iscroll 的实现，它的 API 设计基本兼容 iscroll，在 iscroll 的基础上又扩展了一些 feature 以及做了一些性能优化。
better-scroll 是基于原生 JS 实现的，不依赖任何框架。它编译后的代码大小是 63kb，压缩后是 35kb，gzip 后仅有 9kb，是一款非常轻量的 JS lib。
今天我们利用它实现一个横向滚动——轮播图组件。演示如下：
首先来整理一下需求：
能够根据异步请求到的图片数据进行轮播图展示。
能够控制它是否自动播放，是否循环播放，自动播放间隔。
能够提示当前播放页。
Mock数据
由于是一个demo，从网上找了几张图片写成json格式，数据用于模拟接口数据。这里用到了mock.js。Axios。安装方法如下：
npm install mockjs
npm install --save axios vue-axios
axios使用方法不多赘述，简述一下mock数据。在mock文件夹下新建json文件夹放置json数据文件。新建index.js导出接口。就可以使用axios请求接口了。
[ "https://img3.mukewang.com/szimg/5df8852609e0762d12000676-360-202.png", "https://img1.mukewang.com/szimg/5d9c62fb0907ccf012000676-360-202.png", "https://img3.mukewang.com/5aeecb1d0001e5ea06000338-360-202.jpg" ]
constMock=require('mockjs')
Mock.mock('/slider','get',require('./json/slider.json'))基础组件：slider.vue
将轮播图组件抽象出来，接收isLoop、isAutoPlay、interval属性控制轮播图。从mounted方法调用顺序可以知道思路是
setSliderWidth()中先获取再设置显示层和图片包裹层高度。
initDots()根据图片包裹层子元素的个数设置数组放置圆点。
initSlider()初始化better-scroll。
autoPlay()设置自动播放。
<template>
<divclass="slider-apply"ref="slider"><!--显示层-->
<divclass="slider-group"ref="group"><!--所有图片包裹层-->
<slot></slot><!--插槽显示图片内容-->
</div>
<divclass="dots"><!--提示圆点-->
<divclass="dot"v-for="(item,index)indots":key="index":class="currentIndex===index?'active':''"></div>
</div>
</div>
</template>
<scripttype='text/ecmascript-6'>
importBScrollfrom'better-scroll'
exportdefault{
data(){
return{
dots:[],
currentIndex:0/*当前页下标*/
}
},
props:{
isLoop:{/*循环播放*/
type:Boolean,
default:true
},
isAutoPlay:{/*自动播放*/
type:Boolean,
default:true
},
interval:{/*播放间隔*/
type:Number,
default:2000
}
},
mounted(){/*mounted阶段dom渲染完，20ms确保刷新*/
setTimeout(()=>{
this.setSliderWidth()
this.initDots()
this.initSlider()
if(this.isAutoPlay){
this.autoPlay()
}
},20)
},
methods:{
setSliderWidth(){/*获取显示层宽度，计算内容层宽度*/
constclientWidth=this.$refs.slider.clientWidth
letsliderWidth=0
this.children=this.$refs.group.children
for(leti=0;i<this.children.length;i++){
this.children[i].style.width=clientWidth+'px'
sliderWidth+=clientWidth
}
if(this.isLoop){/*循环播放需要增加前后两个宽度*/
sliderWidth+=clientWidth*2
}
this.$refs.group.style.width=sliderWidth+'px'/*设置内容层宽度*/
},
initDots(){
this.dots=newArray(this.children.length)
},
initSlider(){
this.slider=newBScroll(this.$refs.slider,{
scrollX:true,/*横向滚动*/
scrollY:false,
snap:{/*循环滚动设置*/
loop:this.isLoop,
threshold:0.3,
speed:400
}
})
this.slider.on('scrollEnd',()=>{
constpageIndex=this.slider.getCurrentPage().pageX/*获取当前轮播页，用于圆点提示*/
this.currentIndex=pageIndex
if(this.isAutoPlay){
clearTimeout(this.timer)/*重新设置自动播放，否则无法自动播放*/
this.autoPlay()
}
})
},
autoPlay(){
this.timer=setTimeout(()=>{
this.slider.next(400)
},this.interval)
}
},
destroyed(){/*确保清除定时器*/
clearTimeout(this.timer)
}
}
</script>
<stylelang="stylus"scoped>
.slider-apply
positionrelative//让dots找准位置
height200px
width100%//slider-apply会依据父元素宽度显示宽度
overflowhidden//超出元素隐藏
border-radius5px
.dots
positionabsolute
bottom10px
left50%
transformtranslate(-50%,0)//居中
displayflex
.dot
margin010px
height7px
width7px
background#fff
border-radius50%
.active//当前dot样式
width15px
border-radius50%5px
</style>应用组件：slider-apply.vue
可以根据alider-apply.vue中的使用方法应用在自己的项目中。
<template>
<divclass="slider-wrapper">
<Sliderv-if="showSlider"><!--showSlider使得数据请求完成后再显示，否则better-scroll可能会计算错误-->
<divv-for="iteminimageList":key="item"class="slider-item">
<img:src="item"class="img">
</div>
</Slider>
</div>
</template>
<scripttype='text/ecmascript-6'>
importSliderfrom'base/slider'
exportdefault{
data(){
return{
imageList:[],//图片列表
showSlider:false//显示slider标志位
}
},
created(){
this.getImages()//获取数据
},
methods:{
getImages(){
this.axios.get('/slider').then((res)=>{
this.imageList=res.data
this.showSlider=true
}).catch((err)=>{
console.log(err)
})
}
},
components:{
Slider
}
}
</script>
<stylelang="stylus"scoped>
.slider-wrapper
margin0auto
height200px//固定轮播图显示高度
width500px//固定轮播图显示宽度，可设置百分比
background#000
border-radius5px
.slider-item
floatleft//元素向左浮动
width100%
overflowhidden
text-aligncenter
.img
height200px
width100%
</style>关于怎么在Vue中使用better-scroll实现轮播图就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。
