vue使用swiper的坑-刷新不动,loop属性失效
原文:https://www.cnblogs.com/yujiekangweb/p/7544567.html
在网上查了很多问题，原因应该是加载顺序的问题，数据还没有完全加载的时候就已经渲染swiper了。
解决办法，在swiper初始化的时候把以下两个属性加上。
observer:true,//修改swiper自己或子元素时，自动初始化swiper observeParents:true,//修改swiper的父元素时，自动初始化swiper
就可以了。
下面贴完整代码，有兴趣的可以看一下。
<template>
<div class="main_box">
<swiper :options="swiperOptionTwo" ref="mySwiper">
<!-- slides -->
<swiper-slide>
<div id="index-page">
<img class="index-bg" src="../assets/images/index_bg.png">
<img class="share-button" src="../assets/images/shoes.png" v-on:click="toShoes">
<router-link to="/rule"><div class="rule-click div-click"></div></router-link>
<swiper :options="swiperOption" ref="mySwiper">
<!-- slides -->
<swiper-slide>
<div v-for="(value,index) in marathonList" class="main-info">
<div class="marathon-box">
<img @click="goTms(value.coverLink)" class="index-click" src="../assets/images/index-click-img_03.png">
<div class="box-info">
<div v-for="(valueMode,index) in value.marathonList" class="box-info-line">
<p class="info-text"><span>{{valueMode.name}}</span><span class="value"> {{valueMode.count}}</span></p>
<img class="heart" src="../assets/images/heart.png">
<p class="info-text"><span>{{valueMode.consume}}</span>人已申请</p>
</div>
<div class="box-info-line">
<p class="info-text bottomFont"><span>申请时间</span><span class="value bottomFont"> {{value.applyTime}}</span></p>
<p class="info-text bottomFont"><span>开奖时间</span><span class="value bottomFont"> {{ value.luckTime | moment("MMM Do YY") }}</span></p>
</div>
</div>
</div>
<button class="white-button" v-if="value.applyStatus == 0" @click="goApply(value.name)">立即申请</button>
<button class="white-button" v-if="value.applyStatus == 1">坐等开奖</button>
<button class="white-button" v-on:click="luck(value.name)" v-if="true">点击开奖</button>
<button class="white-button" v-if="value.applyStatus == 4">未中奖</button>
<button class="white-button" v-if="value.applyStatus == 3">中奖</button>
<button class="white-button" v-if="value.applyStatus == 5">已结束</button>
</div>
</swiper-slide>
<swiper-slide>
<div class="main-info">
<div v-for="(value,index) in marathonList" class="marathon-box">
<img v-on:click="goTms" class="index-click" src="../assets/images/index-click-img_03.png">
<div class="box-info">
<div v-for="(valueMode,index) in value.marathonList" class="box-info-line">
<p class="info-text"><span>{{valueMode.name}}</span><span class="value"> {{valueMode.count}}</span></p>
<img class="heart" src="../assets/images/heart.png">
<p class="info-text"><span>{{valueMode.consume}}</span>人已申请</p>
</div>
<div class="box-info-line">
<p class="info-text bottomFont"><span>申请时间</span><span class="value bottomFont"> {{value.applyTime}}</span></p>
<p class="info-text bottomFont"><span>开奖时间</span><span class="value bottomFont"> {{ value.luckTime | moment("MMM Do YY") }}</span></p>
</div>
</div>
</div>
</div>
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
<div class="swiper-button-prev" slot="button-prev"></div>
<div class="swiper-button-next" slot="button-next"></div>
</swiper>
</div>
</swiper-slide>
<swiper-slide>
<!--slide2-->
<div class="slideTwo">
<!-- <img class="index-bg" src="../assets/images/bottom_bg.png"> -->
<div class="bottom-top">
<p>跑马训练计划</p>
<img src="../assets/images/card_test.png">
<img src="../assets/images/card_top.png">
</div>
<div class="bottom-mid">
<p>跑马干货</p>
<img src="../assets/images/card_test.png">
<img src="../assets/images/card_mid.png">
</div>
<div class="bottom-bot">
<p>咕咚学院</p>
<img src="../assets/images/card_test.png">
<img src="../assets/images/card_bottom.png">
</div>
</div>
</swiper-slide>
</swiper>
<img src="../assets/images/tip.png" style="width: 110px; height: 59px; margin-bottom: 5px; left: 320px;" id="array" class="fixed">
</div>
</template>
<style rel="stylesheet/scss" lang="scss" scoped>
#index-page {
position: relative;
.swiper-container {
position: absolute;
height: 1003px;
width: 100%;
top: 200px;
}
.swiper-button-next {
background-image: url(../assets/images/next-btn.png);width: 25px;
height: 635px;
right: 0px;
background-size: cover;
top: 15%;
}
}
.swiper-container {
position: absolute;
height: 1217px;
width: 100%;
}
.slideTwo {
height: 1217px;
color: #fff;
p {
position: absolute;
margin-top: 60px;
margin-left: 23px;
color: #b8b8b8;
font-size: 24px;
}
img {
position: absolute;
margin-top: 100px;
left: 21px;
display: block;
}
.bottom-top {
position: relative;
height: 400px;
}
.bottom-mid {
position: relative;
height: 400px;
}
.bottom-bot {
position: relative;
height: 400px;
}
}
.swiper-button-prev {
background-image: url(../assets/images/next-btn.png);
height: 635px;
left: 0px;
background-size: cover;
top: 15%;
}
@-webkit-keyframes tipmove{0%{bottom:10px;opacity:0}50%{bottom:15px;opacity:1}100%{bottom:20px;opacity:0}}
.ani{
position:absolute;
}
#array{
-webkit-animation: tipmove 1.5s infinite ease-in-out;
}
.fixed{
position:absolute;
z-index:999;
width: 125px;
height: 70px;
margin-bottom: 13px;
left: 320px;
}
.share-button {
position: absolute;
top: 0px;
right: 20px;
}
.rule-click {
position: absolute;
top: 20px;
left: 40px;
width: 150px;
height: 60px;
}
.text-link {
margin-top: 40px;
text-decoration: underline;
color: #858585;
font-size: 28px;
}
.bottomFont {
font-size: 20px !important;
}
.white-button {
display: block;
margin-top: 70px;
background-color: #ffffff;
color: #000000;
padding: 20px;
width: 400px;
border-radius: 40px;
margin-left: 135px;
font-weight: 400;
}
.main-info {
position: absolute;
top: 100px;
width: 670px;
left: 50%;
transform: translate3D(-50%, 0, 0);
-webkit-transform: translate3D(-50%, 0, 0);
.marathon-box {
background-color: #ffffff;
color: #a2a2a2;
font-size: 28px;
.box-info {
padding: 0 50px 40px 50px;
}
.box-info-line {
text-align: left;
.info-text {
display: inline-block;
padding: 40px 0px 0px 0px;
min-width: 240px;
}
}
.index-click {
display: block;
}
.value {
font-size: 29px;
color: #292929;
}
}
}
.index-bg {
position: relative;
display: block;
}
</style>
<script type="text/ecmascript-6">
import store from '../store/index';
import api from '../assets/script/api';
import codoonNativeBridge from 'codoon-native-bridge-js'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import {mapGetters} from 'vuex';
import moment from 'vue-moment'
export default{
components: {
swiper,
swiperSlide
},
data(){
return {
progress: 0,
temp: 0,
store: store,
isInCodoon: false,
swiperOption: {
slidesPerView: 'auto',
centeredSlides: true,
paginationClickable: true,
spaceBetween: 30,
prevButton: '.swiper-button-prev',
nextButton: '.swiper-button-next',
loop: true,
notNextTick: true,
observer:true,//修改swiper自己或子元素时，自动初始化swiper
observeParents:true,//修改swiper的父元素时，自动初始化swiper
},
swiperOptionTwo: {
direction : 'vertical',
speed: 800,
slidesPerView: 'auto',
centeredSlides: true,
paginationClickable: true,
spaceBetween: 30,
notNextTick: true,
observer:true,//修改swiper自己或子元素时，自动初始化swiper
observeParents:true,//修改swiper的父元素时，自动初始化swiper
},
swiperIndex: 0,
marathonList: [],
share: this.$route.query.share,
}
},
computed: {
// swiper() {
// return this.$refs.mySwiper.swiper;
// }
},
mounted() {
var vm = this;
api.marathonList({}).then(response => {
if(response.status) {
vm.marathonList = response.data.marathonList;
}
});
// this.$refs.mySwiper.swiper;
// this.swiper();
},
computed: {
...mapGetters([
'userInfo'
])
},
methods: {
swiper() {
return this.$refs.mySwiper.swiper;
},
goTms(url) {
var nativeB = new codoonNativeBridge();
nativeB.jumpNative({
type: 'webView',
value: url
});
},
toShoes() {
store.router.push({name: 'shoes'});
},
luck(name) {
store.router.push({name: 'luck', query: {name: name}});
},
goApply(name) {
store.router.push({name: 'select', query: { type: this.type, name: name }});
}
}
}
</script>
https://github.com/KeNanMi
浙公网安备 33010602011771号