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

Posted 糊涂一点web

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue使用swiper的坑-刷新不动,loop属性失效相关的知识,希望对你有一定的参考价值。

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

 

以上是关于vue使用swiper的坑-刷新不动,loop属性失效的主要内容,如果未能解决你的问题,请参考以下文章

vue-awesome-swiper使用自动轮播和循环轮播不生效(loop和autoplay)

swiper loop滑动到最后一个跳转第一个后不动了

使用swiper动态加载数据遇到的坑

vue中使用swiper(一页显示3张图片)遇到的坑以及解决方案

vue使用swiper轮播组件开启loop模式时的问题总结

vue项目中使用swiper插件遇到的坑