zoukankan      html  css  js  c++  java
  • vue轮播,vue-awesome-swiper动态数据渲染,loop无效,轮循无效

    解决办法:在渲染数组数据前。判断是否为空   

     v-if="slideList.length>1"
    <template>
      <div class="banner_swiper" >
        <swiper v-if="slideList.length>1" :options="swiperOption" ref="mySwiper" style="height:100%;" >
          <!-- slides -->
          <swiper-slide v-for="(item,index) in slideList" :key="index"><img :src="item.filePath"></swiper-slide>
          <!-- <swiper-slide><img src="../../assets/images/banner2.png"></swiper-slide>
          <swiper-slide><img src="../../assets/images/banner3.png"></swiper-slide> -->
          <!-- Optional controls -->
          <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>
    </template>
    <script>
    // require styles
    import 'swiper/dist/css/swiper.css'
    import { swiper, swiperSlide } from 'vue-awesome-swiper'
    import {getHomeInfo} from '../../assets/js/api.js';
    export default {
      props: ["slideList"],
      data() {
        return {
          swiperOption: {
              observer:true,//修改swiper自己或子元素时,自动初始化swiper
              observeParents:true,//修改swiper的父元素时,自动初始化swiper
              autoplay: {
                delay: 4000,//1秒切换一次
              },
              initialSlide :0,
              loop : true,
              pagination: {
                el: '.swiper-pagination',
              },
              // navigation: {
              //   nextEl: '.swiper-button-next',
              //   prevEl: '.swiper-button-prev',
              // },
              
          }
        };
      },
      computed: {
        swiper() {
          return this.$refs.mySwiper.swiper
        }
      },
      components: {
        swiper,
        swiperSlide
      },
      mounted() {
        // console.log(
        //     'This is current swiper instance object', this.mySwiper, 
        //     'It will slideTo banners 3')
        // this.mySwiper.slideTo(3, 1000, false)
      },
      methods: {
      }
    };
    </script>
    <style>
      .banner_swiper{width:100%;height:auto;}
      .swiper-pagination-bullet-active{background-color:#ff450e;}
    </style>
  • 相关阅读:
    搞清楚C#中的值类型(基础类型)和引用类型
    构造动态SQL语句
    Json.net API及常用方法
    泛型代码中的default有何作用
    SQL 中的for xml path()的使用
    fastJosn和JackJson的区别
    箭头函数
    3篇文章初探MVC工作流程
    MVC传递Model之TempData、ViewData、ViewBag区别和用途
    .Net 提交页面,js修改的Label值会丢掉
  • 原文地址:https://www.cnblogs.com/LChenglong/p/9373557.html
Copyright © 2011-2022 走看看