粉红色部分为论播图,红色部分为解决方案,当然还有其他的方案,先放着看着,后续再补充
出现的问题:在swiper中使用vue的v-for 没法渲染,或者不会滑动(轮播)
有问题先滴滴我,看到第一时间回复,由于时间紧迫,在此先放上代码.
q群:@群主就找到我了182415907
别忘了点赞!
<template>
<div id="home">
<Header>
</header>
<div id="banner">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="item in imgList">
<!--<a href="">
<img :src="item.picturehref" alt="">
</a>-->
<a href="">
{{item.title}}
<img src="../../assets/images/bannerImg/banner.png" alt="">
</a>
</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
</div>
</div>
<!--分类-->
</div>
</template>
<script>
import '../../assets/swiper/dist/css/swiper.min.css';
import Swiper from "swiper"
import Header from '../common/header.vue';
export default {
name: "home",
el: '#home',
data() {
return {
imgList: [],
}
},
components: {
Header,
},
mounted() {
new Swiper('.swiper-container', {
loop: true,
autoplay: {
delay: 3000, //n秒切换一次
},
pagination: {
el: '.swiper-pagination',
},
//坑
autoplayDisableOnInteraction: false,
observer: true, //修改swiper自己或子元素时,自动初始化swiper
observeParents: true //修改swiper的父元素时,自动初始化swiper
});
},
beforeMount() {
let _this = this;
this.$axios.post('http://result.eolinker.com/G4xL2s345638119971c6917f4e01869ddd10a41fb63ba20?uri=/titleList.do', {
params: {
type: 'appban',
show: 'y'
}
})
.then(function(res) {
console.log(res.data);
_this.imgList = res.data.data;
})
.catch(function(err) {
console.log("请求失败!")
console.log(err);
});
},
}
</script>
<style lang="less">
#banner {
width: 3.2rem;
height: 1.8rem;
img {
display: block;
width: 100%;
height: 100%;
}
}
.swiper-pagination-bullet {
width: .2rem;
height: .05rem;
display: inline-block;
border-radius: 0;
margin: 0 .5rem;
background: #000;
opacity: .2;
}
.swiper-pagination-bullet-active {
background: #F6A545;
opacity: .6;
}
</style>