vue使用swiper的坑-刷新不动,loop属性失效

Posted 2020-10-07 糊涂一点web

在网上查了很多问题，原因应该是加载顺序的问题，数据还没有完全加载的时候就已经渲染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>