版权声明:本文为博主原创文章,未经博主允许不得转载。 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>
其他的都跟教程一样。希望对进来看得你有用