vue-awesome-swiper动态数据轮播无效

最新推荐文章于 2023-05-15 17:10:05 发布

qq_846784996

最新推荐文章于 2023-05-15 17:10:05 发布

阅读量613

点赞数

分类专栏： vue-awesome-swiper 文章标签：动态数据加载轮播无效

原文链接：https://blog.csdn.net/m0_37885651/article/details/81084681

版权

vue-awesome-swiper 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

swiper容器那v-if判断一下，是否有数据可以解决；划重点v-if="gglist.length>1"


<template>
    <div>
        //第一个轮播   加了v-if 判断，可以实现 loop 轮循
        <swiper v-if="gglist.length>1" :options="swiperOption" ref="mySwiper" class="swiper-box">
            <!-- slides -->
            <swiper-slide v-for="m in gglist">{{m}}</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>
        第二个轮播  没加判断  不能实现loop  可试试看
        <swiper :options="swiperOption" ref="mySwiper2" class="swiper-box">
            <!-- slides -->
            <swiper-slide v-for="m in gglist">{{m}}</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>
</template>

<script>
    //前提你已经下载好vue-awesome-swiper,swiper.min.css 引入
    import Vue from 'vue'
    import VueAwesomeSwiper from 'vue-awesome-swiper'
    import 'swiper/dist/css/swiper.min.css'
    Vue.use(VueAwesomeSwiper)

    export default{
        components: {
            swiper:VueAwesomeSwiper.swiper,
            swiperSlide:VueAwesomeSwiper.swiperSlide
        },
        data(){
            return{
                //配置
                swiperOption: {
                  loop : true,
                  speed: 900,
                  notNextTick: true,
                  autoplay:true,
                  preloadImages: false,
                  pagination: {
                    el: '.swiper-pagination',
                  },
                  paginationClickable :true,
                  navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                  },
               },
               gglist:[],//存放的数据list

            }
        },
        beforeCreate:function(){

        },
        created:function(){

        },
        beforeMount: function () {

        },
        computed: {
            swiper() {
                return this.$refs.mySwiper.swiper
            }
        },
        mounted:function(){
            
            Vue.axios.get('/api/trade/***').then((response) => {
              console.log(response);
              this.gglist = response.data.zbGongGao;
            })
        }
    }
</script>

<style lang="scss" scoped>
    .swiper-box{
        height: 280px;
        width: 100%;
    }
</style>

感恩原作者，原文地址https://blog.csdn.net/m0_37885651/article/details/81084681