想吐槽啊，网上看了那么多文章，写来写去，一大堆，就是一个简单的利用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>文章来源: vue之better-scroll轮播