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>
  • 相关阅读:
    递归与尾递归总结
    JAVA基础——链表结构之双端链表
    JAVA基础——链表结构之单链表
    JAVA基础——集合Iterator迭代器的实现
    JAVA基础——Date和Calendar类
    JAVA基础——Native关键字
    Java基础——从数组到集合之间关键字的区别!!!!
    JAVA基础——集合类汇总
    Web前端性能优化——提高页面加载速度
    vue 与 angular 的区别
  • 原文地址:https://www.cnblogs.com/LChenglong/p/9373557.html
Copyright © 2011-2022 走看看