采用better-scroll组件，是一个适用于易懂端的滚动插件。具体插件使用详情请查看https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/installation.html#npm
<template>
<div class="slider" ref="slider">
<div class="slider-group" ref="sliderGroup">
<slot></slot>
</div>
<div class="dots">
<span class="dot" :class="{active:currentPageIndex===index}" v-for="(item,index) in dots"></span>
</div>
</div>
</template>
<script>
import {addClass} from '@/assets/js/dom.js';
import BScroll from 'better-scroll';
export default {
name: 'Slider',
props:{
loop:{
type:Boolean,
default:true
},
autoPlay:{
type:Boolean,
default:true
},
interval:{
type:Number,
default:4000
}
},
data () {
return {
dots:[],
currentPageIndex:0
}
},
mounted(){
setTimeout(()=>{
this._setSliderWidth();
this._initDots();
this._initSlider();
if(this.autoPlay){
this._play();
}
},20)
window.addEventListener('resize',()=>{
if(!this.slider){
return;
}
this._setSliderWidth(true);
this.slider.refresh();
})
},
methods:{
_setSliderWidth(isResize){
this.children=this.$refs.sliderGroup.children;
let width=0;
let sliderWidth=this.$refs.slider.clientWidth;
console.log(sliderWidth)
for (let i = 0; i < this.children.length; i++) {
let child=this.children[i];
addClass(child,'slider-item');
child.style.width=sliderWidth+'px';
width+=sliderWidth;
}
if(this.loop && !isResize){
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:true,
snapLoop:this.loop,
snapThreshold:0.3,
snapSpeed:400,
})
this.slider.on('scrollEnd',()=>{
let pageIndex=this.slider.getCurrentPage().pageX;
if(this.loop){
pageIndex-=1;
}
this.currentPageIndex=pageIndex;
if(this.autoPlay){
clearTimeout(this.timer)
this._play();
}
})
},
_initDots(){
this.dots=new Array(this.children.length);
},
_play(){
let pageIndex=this.currentPageIndex+1;
if(this.loop){
pageIndex+=1;
}
this.timer=setTimeout(()=>{
this.slider.goToPage(pageIndex,0,400);
},this.interval)
}
},
destroyed(){
clearTimeout(this.timer)
}
}
</script>
<style lang="scss">
@import '../../assets/sass/_variable.scss';
.slider{
overflow:hidden;
position:relative;
.slider-group{
overflow:hidden;
white-space:nowrap;
.slider-item{
float:left;
box-sizing:border-box;
overflow:hidden;
a{
display:block;
width:100%;
overflow:hidden;
text-decoration:none;
img{
display:block;
width:100%;
}
}
}
}
.dots{
position:absolute;
left:0;
right:0;
bottom:0;
text-align:center;
display:inline-block;
.dot{
display:inline-block;
width:0.8rem;
height:0.8rem;
border-radius:50%;
margin:0 0.4rem;
background-color:#fff;
&.active{
width:2rem;
border-radius:0.5rem;
background-color:$color-theme;
}
}
}
}
</style>
问题一：
取不到数据，是由于在使用slider父组件recommend.vue中，加载slot组件的时候还没取到数据，所以加载的是空数据，所以要在父组件中写一个v-if
<slider v-if="recommend.length">
<div v-for="item in recommend">
<a :href="item.linkUrl">
<img :src="item.picUrl" alt="">
</a>
</div>
</slider>
