better-scroll 轮播（1.0+版本）

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_34672907/article/details/80137996

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

recommend.vue如下

<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>

其他的都跟教程一样。希望对进来看得你有用