码迷,mamicode.com
首页 > 其他好文 > 详细

解决swiper-slide在ion-slide-box不滑动的问题(暂且这么描述)

时间:2018-08-15 18:32:27      阅读:368      评论:0      收藏:0      [点我收藏+]

标签:ber   mys   dom   环境   数据   ide   inf   ionic   显示   

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元素上的方法已经先行执行完了,所以在肉眼上造成,页面已经渲染完,但是滑动效果并未执行的感觉,从而表现为滑动无效

解决方法:在页面渲染完成后添加监听事件

  1. $scope.$watch(‘$viewContentLoaded‘,function(event){
  2.  
    var mySwiper = new Swiper(‘.swiper-container‘, {
    // pagination : ‘.swiper-pagination‘,//分页
    observer:true,//修改swiper自己或子元素时,自动初始化swiper
    observeParents:true,//修改swiper的父元素时,自动初始化swiper
    slidesPerView: 4.5,//每页显示数量
    // freeMode:true,//是否开启随意滑动
    })
  3.  
    });
    亲测可行。

 

解决swiper-slide在ion-slide-box不滑动的问题(暂且这么描述)

标签:ber   mys   dom   环境   数据   ide   inf   ionic   显示   

原文地址:https://www.cnblogs.com/wyycatch/p/9483004.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!