1，開發(fā)環(huán)境ionic1+angularjs1 嗯對的版本都是最低版本

頁面結(jié)構(gòu)想要完成的功能是這樣的（比較丑 ，不接受批評，捂臉）

?

大致如圖?

代碼結(jié)構(gòu)：

?

<ion-slide-box><ion-slide> //列表 <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"> 111 </div> <div class="swiper-slide"> 222 </div> <div class="swiper-slide"> 333 </div> <div class="swiper-slide"> 444 </div> </div> </div> //tab1控制顯示的頁面內(nèi)容 <div>tab1顯示的內(nèi)容</div> </ion-slide> //tab2控制顯示頁面內(nèi)容 <div>tab2顯示的內(nèi)容</div> <ion-slide></ion-slide> </ion-slide-box>

最后的效果。可以看到tab可以實現(xiàn)內(nèi)容的切換。但是列表似乎并沒有執(zhí)行滑動效果。

原因，由于數(shù)據(jù)還未填充到頁面，頁面渲染也還未完成，但此時swiper綁定到dom元素上的方法已經(jīng)先行執(zhí)行完了，所以在肉眼上造成，頁面已經(jīng)渲染完，但是滑動效果并未執(zhí)行的感覺，從而表現(xiàn)為滑動無效

解決方法：在頁面渲染完成后添加監(jiān)聽事件

$scope.$watch('$viewContentLoaded',function(event){

var mySwiper = new Swiper('.swiper-container', { // pagination : '.swiper-pagination',//分頁 observer:true,//修改swiper自己或子元素時，自動初始化swiper observeParents:true,//修改swiper的父元素時，自動初始化swiper slidesPerView: 4.5,//每頁顯示數(shù)量 // freeMode:true,//是否開啟隨意滑動 })

}); 親測可行。

?

轉(zhuǎn)載于:https://www.cnblogs.com/wyycatch/p/9483004.html

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結(jié)

以上是生活随笔為你收集整理的解决swiper-slide在ion-slide-box不滑动的问题（暂且这么描述）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。