1，開發環境ionic1+angularjs1 嗯對的版本都是最低版本

頁面結構想要完成的功能是這樣的（比較丑 ，不接受批評，捂臉）

?

大致如圖?

代碼結構：

?

<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控制顯示的頁面內容 <div>tab1顯示的內容</div> </ion-slide> //tab2控制顯示頁面內容 <div>tab2顯示的內容</div> <ion-slide></ion-slide> </ion-slide-box>

最后的效果。可以看到tab可以實現內容的切換。但是列表似乎并沒有執行滑動效果。

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

解決方法：在頁面渲染完成后添加監聽事件

$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,//每頁顯示數量 // freeMode:true,//是否開啟隨意滑動 })

}); 親測可行。

?

轉載于:https://www.cnblogs.com/wyycatch/p/9483004.html

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。