問(wèn)題描述

題主是用vue寫的 因?yàn)闆](méi)有請(qǐng)求的數(shù)據(jù)就造了些假數(shù)據(jù):

這是動(dòng)態(tài)生成的img標(biāo)簽

然后再頁(yè)面上使用:

但打開chrome看一下效果發(fā)現(xiàn)這個(gè)不能劃動(dòng),只能看到初始的那張照片

動(dòng)態(tài)生成的img也是正確 結(jié)構(gòu)如下 但為什么不能劃動(dòng)呢

而且奇怪的是題主把動(dòng)態(tài)生成的img標(biāo)簽換成3個(gè)‘<p class='swiper-slide'>Slide 1</p>’ 也是不能劃動(dòng) 我看swiper官方文檔上也沒(méi)有額外的劃動(dòng)方法，請(qǐng)問(wèn)我這個(gè)是哪里出了問(wèn)題呢

問(wèn)題解答

事件可能沒(méi)有綁定上，你試試把new swiper放在mounted 生命周期里試試，還有就是用vue-swiper別人封裝好的了

原因不夠詳細(xì)，只能推測(cè)可能出在 “動(dòng)態(tài)生成” 這一塊上，就好像你給元素綁定事件，按照常規(guī)的方法ele.addEventListener給動(dòng)態(tài)生成的元素會(huì)失敗。

樓主寫的代碼中，怎么swiper-containter竟然套了又套？？？

我給你我寫好的 你比對(duì)一下吧 你那個(gè) 太看不清了html

<p class='swiper-container'> <!--輪播圖--> <p class='swiper-wrapper'><!--<p class='swiper-slide'>--> <!--<a href='http://www.gepszalag.com/wenda/4444.html'><img src='http://www.gepszalag.com/images/lunbo.png' alt='1'/></a>--><!--</p>--> </p> <!-- 分頁(yè)器 --> <p class='swiper-pagination'> </p></p>

js：

//渲染活動(dòng) 圖片輪播function activitySwiper(arry) { var arr = arry.activity; var strAct = ''; console.log('--開始拼接輪播活動(dòng)字符串--'); 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);} 用著 一點(diǎn)問(wèn)題沒(méi)有 最外層 不要忘了 聲明 mySwiper ：var mySwiper='';回答5：

swiper.update()試試

找到原因了 原因是初始化swiper的位置不對(duì),動(dòng)態(tài)生成img標(biāo)簽要在標(biāo)簽全部渲染到界面上后再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自己或子元素時(shí)，自動(dòng)初始化swiper observeParents:true,//修改swiper的父元素時(shí)，自動(dòng)初始化swiper onSlideChangeEnd: function (swiper) {this.showImageInfo(swiper.activeIndex); }});

更改了綁定的數(shù)據(jù)源去生成組件是異步的，所以要講初始化swiper的操作放在組件加載完畢的生命周期里執(zhí)行，也就是放在Vue對(duì)象的mounted函數(shù)里