最近因為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>