better-scroll 轮播（1.0+版本）

最近因为vue不是很熟练，所以看了慕课网的移动端音乐app。

但是在跟着做轮播图的时候发现很多问题，循环不出来，自动轮播不出来等问题，发现是版本不对。解决完之后做个mark，如果你们也遇到这样的问题，希望对你们有用

首先是slider.vue

<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 dots" :class="{active:currentPageIndex === index}"></span></div></div>
</template><script type="text/ecmascript-6">import BScroll from 'better-scroll'import { addClass } from 'common/js/dom'export default {name: 'slider',props: {loop: {type: Boolean,default: true},autoPlay: {type: Boolean,default: true},interval: {type: Number,default: 2000}},data() {return {dots: [],currentPageIndex: 0,}},mounted() {setTimeout(() => {this._setSliderWidth();this._initSlider();this._initDots();if(this.autoPlay) {this._play();}}, 20)window.addEventListener('resize',()=>{if(!this.slider){//没有初始化时return;}else{this._setSliderWidth(true);this.slider.refresh();}})},methods: {_setSliderWidth(isResize) {this.children = this.$refs.sliderGroup.children;let width = 0;let sliderWidth = this.$refs.slider.clientWidth;for(let i = 0; i < this.children.length; i++) {let child = this.children[i];addClass(child, 'slide-item');child.style.width = sliderWidth + 'px';width += sliderWidth;}if(this.loop && !isResize) { //循环的话，为了实现无缝，width要设置两倍保证是同样的图片width += 2 * sliderWidth;}this.$refs.sliderGroup.style.width = width + 'px';},_initSlider() {this.slider = new BScroll(this.$refs.slider, {scrollX: true,scrollY: false,momentum: false,snap: {loop: this.loop,threshold: 0.3,speed: 400},/1.0+版本是在snap里面配置的loop和threshold和speed})//点滚动的问题this.slider.on('scrollEnd', () => {let pageIndex = this.slider.getCurrentPage().pageX;this.currentPageIndex = pageIndex;//0+版本是需要-2的if(this.autoPlay) {clearTimeout(this.timer); //用手拖的时候this._play();}})},_initDots() {this.dots = new Array(this.children.length - 2);},_play() {this.timer = setTimeout(() => {this.slider.next(); //0+版本是用this.slider.goToPage(pageIndex,0,400);但是在1.0+版本是无效的}, this.interval)},destroyed(){clearTimeout(this.timer);}}}
</script><style>.slider {min-height: 1px;position: relative;}.slider .slider-group {position: relative;overflow: hidden;white-space: nowrap;}.slider-group .slider-item {float: left;box-sizing: border-box;overflow: hidden;text-align: center;}.slider-item a {display: block;width: 100%;overflow: hidden;text-decoration: none;}.slider-item a img {display: block;width: 100%}.dots {position: absolute;right: 0;left: 0;bottom: 12px;text-align: center;font-size: 0;}.dot {display: inline-block;margin: 0 4px;width: 8px;height: 8px;border-radius: 50%;background: #fff;}.dot.active {width: 20px;border-radius: 5px;background: yellow;}
</style>

<template><div class="recommend"><div class="recommend-content"><div class="slider-wrapper" v-if="recommends.length>0"><slider><div class="slider-item" v-for="item in recommends"><a :href="item.linkUrl"><img :src="item.picUrl"/></a></div></slider></div></div><div class="recommend-list"><h1 class="list-title">热门歌单</h1></div></div>
</template><script type="text/ecmascript-6">import Slider from 'base/slider/slider'import {getRecommend} from 'api/recommend'export default{components: {Slider},created(){this._getRecommend();},data (){return{recommends:[]}},methods:{_getRecommend() {getRecommend().then((res)=>{if(res.code === 0){console.log(res.data.slider);this.recommends = res.data.slider}})}}}
</script><style>
</style>