vue swiper遇到的问题

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/weixin_38747509/article/details/82588082

动态取数据，轮播时第一张会被跳过，可以采用vue-awesome-swiper；

我还是用swiper

html：

 <link href="./css/swiper.min.css" rel="stylesheet">
<!-- 轮播图 -->
    <div class="header">
      <div class="swiper-container" v-show = "Object.keys(BannerList).length > 0">
        <div class="swiper-wrapper" >
          <!-- <a class="swiper-slide" v-for="(BannerList,index) in BannerList" :href="BannerList.AppLink" :gt=`app_huodong_banner${index}`>
            <img v-bind:src="BannerList.AppPic">
          </a> -->
        </div>
        <div class="swiper-button-prev" v-show="BannerModel"></div>
        <div class="swiper-button-next" v-show="BannerModel"></div>
        <div class="swiper-pagination" v-show="BannerModel"></div>
      </div>
    </div>
<script src="//ceair-resource.oss-cn-shanghai.aliyuncs.com/scripts/core/jquery-1.8.3.min.js"></script>
<script src="./js/swiper.jquery.min.js"></script>

js：

if (data.Data.BannerList.BannerList.length > 0) {
                            let a = data.Data.BannerList.BannerList.map((item, index) => {
                                return ` <a class="swiper-slide" href="${item.AppLink}" :gt="app_huodong_banner${index}">
                                <img src="${item.AppPic}">
                              </a>
                                `
                            });
                            $('.swiper-wrapper').append(a.join(''));
                            _this.BannerList = data.Data.BannerList.BannerList || [];
                            //前一个  后一个  轮播点是否显示
                            _this.BannerList && _this.BannerList.length == 1 ? _this.BannerModel = false : _this.BannerModel;
                            var swiper = new Swiper('.swiper-container', {
                                direction: 'horizontal',
                                loop: true,
                                autoplay: 2000,
                                pagination: '.swiper-pagination',
                                nextButton: '.swiper-button-next',
                                prevButton: '.swiper-button-prev',
                                paginationClickable: true,//分页器可点击
                                observer: true,
                                observeParents: true,
                            })
                        }

less：

//轮播图
.swiper-slide{
	display: block;
}