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>
  • 相关阅读:
    HTML5表单_form
    HTML第二篇
    快速创建1000个目录
    centos7忘记root密码重置
    centos7更改网卡名称
    centos7磁盘在线扩容
    sqlserver开启远程访问
    安装php后无法动态加载库
    编译openssl和Apache报错checking for SSL_CTX_new... no
    centos6.5设置key登录
  • 原文地址:https://www.cnblogs.com/LChenglong/p/9373557.html
Copyright © 2011-2022 走看看