解決swiper-slide在ion-slide-box不滑動的問題（暫且這麽描述）
阿新 • • 發佈：2018-08-15
事件 版本 mod ring ams line 但是 keyword true
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,//是否開啟隨意滑動 })
- }); 親測可行。
解決swiper-slide在ion-slide-box不滑動的問題（暫且這麽描述）