Vue初学者,写项目实现轮播图时报错且页面初始化后不会自动轮播。
设置的计时器时长是6000,但报错是几乎没有停歇的报错。
检查核心代码,发现
错误一:这里导致轮播图初始化不轮播
mounted的方法写在了methods里面,将mounted的方法挪出,解决页面初始化轮播图不切换的问题。
错误二:这里导致报错 Uncaught RangeError: Maximum call stack size exceeded
方法写错了,应该是 return this.nowIndex +1
错误三:这里导致不间歇的报错
应该把inv的属性设置写在props里面。
完整轮播图实现如下:
视图部分
<slide-show v-bind:slides="slides"></slide-show>
<script>
import slideShow from '../components/slideShow'
export default {
components:{
slideShow
},
data(){
return{
boardList:null,
newsList:[],
productList:null,
slides: [
{
title: 'danceRobot',
href:'detail/danceRobot',
src: require("../assets/slideShow/pic1.jpg")
},
{
title: 'EnglishLearningRobot',
href:'detail/EnglishLearningRobot',
src: require("../assets/slideShow/pic2.jpg")
},
{
title: 'eyeCare',
href:'detail/eyeCare',
src: require("../assets/slideShow/pic3.jpg")
},
{
title: 'serviceRobot',
href:'detail/serviceRobot',
src: require("../assets/slideShow/pic4.jpg")
}
]
}
}
}
</script>
组件部分
<template>
<div class="slide-show" @mouseover="clearInv" @mouseout="runInv">
<div class="slide-img">
<a :href="slides[nowIndex].href">
<transition name="slide-trans">
<img v-if="isShow" :src="slides[nowIndex].src">
</transition>
<transition name="slide-trans-old">
<img v-if="!isShow" :src="slides[nowIndex].src">
</transition>
</a>
</div>
<h2>{{slides[nowIndex].title}}</h2>
<ul class="slide-pages">
<li @click="goto(prevIndex)"><</li>
<li v-for="(item,index) in slides" @click="goto(index)">
<a :class="{on:index === nowIndex}">{{index +1}}</a>
</li>
<li @click="goto(nextIndex)">></li>
</ul>
</div>
</template>
<script>
export default {
props:{
slides:{
type:Array,
default:[]
},
inv:{
type:Number,
default:6000
}
},
data(){
return {
nowIndex:0,
isShow:true
}
},
computed:{
prevIndex(){
if(this.nowIndex === 0){
return this.slides.length -1
}else{
return this.nowIndex -1
}
},
nextIndex(){
if(this.nowIndex === this.slides.length -1){
return 0
}else{
return this.nowIndex +1
}
}
},
methods:{
goto(index){
this.isShow = false
setTimeout(()=>{
this.isShow = true
this.nowIndex = index
},10)
},
runInv(){
this.invId=setInterval(()=>{
this.goto(this.nextIndex)
},this.inv)
},
clearInv(){
clearInterval(this.invId)
}
},
mounted(){
this.runInv();
}
}
</script>
<style scoped>
.slide-trans-enter-active {
transition: all .5s;
}
.slide-trans-enter {
transform: translateX(900px);
}
.slide-trans-old-leave-active {
transition: all .5s;
transform: translateX(-900px);
}
.slide-show {
position: relative;
margin: 15px 15px 15px 0;
width: 900px;
height: 500px;
overflow: hidden;
}
.slide-show h2 {
position: absolute;
width: 100%;
color: #fff;
background: #000;
opacity: .5;
bottom: 0;
height: 30px;
text-align: left;
padding-left: 15px;
}
.slide-img {
width: 100%;
}
.slide-img img {
width: 100%;
position: absolute;
top: 0;
}
.slide-pages {
position: absolute;
bottom: 10px;
left: 480px;
}
.slide-pages li {
display: inline-block;
padding: 0 10px;
cursor: pointer;
color: #fff;
}
.slide-pages li .on {
text-decoration: underline;
}
</style>