javascript - swiper圖片無法劃動

Question

題主是用vue寫的 因為沒有請求的資料就造了些假資料:

#這是動態產生的img標籤

#然後再在頁面上使用:

#但打開chrome看一下效果發現這個不能劃動,只能看到初始的那張照片

#動態產生的img也是正確 結構如下 但為什麼不能劃動呢

#而且奇怪的是題主把動態產生的img標籤換成3個' <p class="swiper-slide">Slide 1</p>
' 也是不能劃動我看swiper官方文件上也沒有額外的劃動方法，請問我這個是哪裡出了問題呢

Answer 1

事件可能沒有綁定上，你試試把new swiper放在mounted 生命週期裡試試，還有就是用vue-swiper別人封裝好的了

Answer 2

原因不夠詳細，只能推測可能出在 「動態生成」 這一塊上，就好像你給元素綁定事件，按照常規的方法ele.addEventListener給動態生成的元素會失敗。

Answer 3

樓主寫的程式碼中，怎麼swiper-containter竟然套了又套？ ？ ？

Answer 4

我給你我寫好的 你比對一下吧 你那個 太看不清了
html

 <p class="swiper-container">
            <!--轮播图-->
            <p class="swiper-wrapper">
                <!--<p class="swiper-slide">-->
                    <!--<a href=""><img src="../images/lunbo.png" alt="1"/></a>-->
                <!--</p>-->
            </p>
            <!-- 分页器 -->
            <p class="swiper-pagination">

            </p>
        </p>

js：

 //渲染活动  图片轮播
function activitySwiper(arry) {
    var arr = arry.activity;
    var strAct = "";
    console.log("--开始拼接轮播活动字符串--");
    for (var i = 0; i < arr.length; i++) {
        strAct += "<p class='swiper-slide'>\
                        <a href='" + arr[i].requestUrl + "'><img src='" + arr[i].imageUrl + "'></a>\
                   </p>"
    }
    $(".swiper-wrapper").html(strAct);
    mySwiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        paginationClickable: true,
        autoplay: 5000,
        loop: true
    });
    setInterval("mySwiper.slideNext()", 5000);
}  


用着  一点问题没有   最外层 不要忘了 声明  mySwiper   ：var mySwiper="";        

Answer 5

swiper.update()試試

Answer 6

找到原因了 原因是初始化swiper的位置不對,動態生成img標籤要在標籤全部渲染到界面上後再new swiper 我使用vue寫組件 原始代碼是這樣

var attachments = [{attachment_url:"https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1384462805,1750500487&fm=23&gp=0.jpg",tag:"在途"},
                {attachment_url:"https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2261844264,1398222573&fm=23&gp=0.jpg",tag:'雨天'},
                {attachment_url:"https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1682686082,380056728&fm=23&gp=0.jpg",tag:"下雪"},
                {attachment_url:"https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2437762035,2994278153&fm=23&gp=0.jpg",tag:"路滑"}];
        this.listData = attachments;
        var swiper = new Swiper('.swiper-container', {
            pagination: '.swiper-pagination',
            paginationClickable: true,
            preloadImages: false,
            lazyLoading: true,
            longSwipesRatio: 0.3,
            touchRatio:1,
            // observer:true,//修改swiper自己或子元素时，自动初始化swiper
            observeParents:true,//修改swiper的父元素时，自动初始化swiper
            onSlideChangeEnd: function (swiper) {
                this.showImageInfo(swiper.activeIndex);
            }
        });
        

更改了綁定的資料來源去產生元件是異步的，所以要講初始化swiper的操作放在元件載入完畢的生命週期裡執行，也就是放在Vue物件的mounted函數裡