代码如下:
<template>
<div class="slide_box">
<div class="slide" ref="slider">
<div class="slide-group" ref='slideGroup'>
<slot>
</slot>
</div>
<div class="dots">
<span class="dot" :class="{dotActive: (currentPageIndex) === index }" v-for="(item, index) in dots">{{index+1}}</span>
</div>
</div>
</div>
</template>
<script>
import BScroll from 'better-scroll';
export default {
name:"betterScroll",
props: {
loop: {
type: Boolean,
default: true,
},
autoPlay: {
type: Boolean,
default: true,
},
interval: {
type: Number,
default: 1000
}
},
data() {
return {
dots:[],
currentPageIndex:0
}
},
mounted() {
this.setSliderWidth(); //设置轮播图的宽度
setTimeout(()=>{
this._initDots();
this.init();
if(this.autoPlay) {
this.play();
}
},20)
},
destroyed() {
clearTimeout(this.timer);
},
methods: {
setSliderWidth() {
this.children = this.$refs.slideGroup.children;
let width = 0;
let sliderWidth = this.$refs.slider.clientWidth;
for(let i = 0; i < this.children.length; i ++){
this.children[i].style.width = window.screen.width + 'px';
width += sliderWidth;
}
if(this.loop){
width += 2*sliderWidth;
}
this.$refs.slideGroup.style.width = width + 'px';// 最长的盒子
},
init(){
let vm = this;
// 实例化scroll
this.scroll = new BScroll(this.$refs.slider, {
scrollX: true,
scrollY: false,
momentum: false, //关闭或者打开惯性运动的执行
snap: {
loop: this.loop, // 循环
threshold: 0.3,
speed: 400 // 轮播间隔
}
})
this.scroll.on('scrollEnd', () => {
let pageIndex = this.scroll.getCurrentPage().pageX;
this.currentPageIndex = pageIndex;
if(vm.autoPlay) {
vm.play();
}
})
this.scroll.on('beforeScrollStart', () => {
if(vm.autoPlay){
clearTimeout(vm.timer);
}
})
},
_initDots() {
this.dots = new Array(this.children.length)
},
play() {
let vm = this;
this.timer = setTimeout(() => {
vm.scroll.next();
},vm.interval)
}
}
}
</script>
<style >
.slide{
width: 100%;
overflow: hidden;
height: 150px;
position: relative;
}
.slide-group{
height: 150px;
}
.slider-item{
float: left;
height: 150px;
}
.dots{
position: absolute;
left: 0;
right: 0;
bottom: 10px;
text-align: center;
}
.dot, .dotActive{
background: yellow;
display: inline-block;
margin: 0 4px;
height: 20px;
width: 20px;
border-radius: 50%;
}
.dotActive{
background: red;
}
</style>