想吐槽啊,网上看了那么多文章,写来写去,一大堆,就是一个简单的利用better-scroll来制作的一个轮播效果,搞不明白为啥那么多代码。。。
html:
<template>
<div class="banner-warpper" ref="banner">
<div class="banner-group" ref="bannerGroup" >
<div class="banner-item" :key="item.img" v-for="item in banner"><router-link :to="item.link"><img :src="item.img" ></router-link></div>
</div>
<div class="banner-dots" v-show="dots">
<div class="dots-item" v-for="(item,index) in banner" :key="index" :class="index === actives ? 'active' : ''"></div>
</div>
</div>
</template>
js:
<script>
import BScroll from 'better-scroll';
export default {
name: 'banner',
props: {
banner: { // 获取banner列表
type: Array
},
dots: { // 是否显示底部原点
type: Boolean,
default: true
}
},
data () {
return {
actives: 0, // 当前项,展示项
};
},
created () {
this.setWidth();
},
mounted () {
this.$nextTick(() => {
this.scroll = new BScroll(this.$refs.banner, {
click: true,
scrollX: true,
scrollY: false,
momentum: false,
snap: true,
snapLoop: true,
snapThreshold: 0,
snapSpeed: 400
});
setInterval(() => { // 这里,这里,这里!就这一个setInterval,解决了banner轮播
this.actives++; // 每隔2s actives自增1
if (this.actives >= this.banner.length) { // 判断actives是否大于等于banner长度
this.actives = 0; // 超过就归0
}
this.scroll.goToPage(this.actives, 0, 400); // 滚动到此页面 ,关于goToPage函数请看 Vue之better-scroll
}, 2000); // 间隔时间:2s
});
},
methods: {
setWidth () { // 宽度设置,自适应
const swidth = window.innerWidth;
this.$nextTick(() => {
this.$refs.banner.style.width = swidth + 'px';
this.$refs.bannerGroup.style.width = swidth * this.banner.length + 'px';
for (let childrenKey of this.$refs.bannerGroup.children) {
childrenKey.style.width = swidth + 'px';
}
});
}
}
};
</script>