【ionic框架bug】slideBox在使用model或pop后width变为0的解决方案

2019独角兽企业重金招聘Python工程师标准>>>

重新排版后的文章链接：https://my.oschina.net/keysITer/blog/749208

 

在项目中的日历使用的是silideBox，但是最近在测试的时候发现一个框架BUG：

问题描述：

如果在silideBox上使用缓存，那么在进入另一个state之后，打开一个Popover或者一个Modal，再返回原来的页面，则slideBox的width变为0，即看不见silideBox的内容了。

解决方案：

1.使用ng-if

  即不使用缓存，但是这样的弊端就是没有缓存-.-。

2.使用$ionicSlideBoxDelegate.update()

在每次进入页面的时候执行此方法，会让slideBox重新计算宽度和高度。判断进入页面的方法可以是监听$ionicView.enter或者$stateChangeSuccess，建议后者，其中封装的有stateFrom、stateTo等方法方便判断页面的跳转，并且反应较前者快很多。

3.修改ionic源码（建议）

为什么说这个是ionic的框架bug，就是因为它的源码写的有缺陷，导致一些莫名其妙的问题。所以打开ionic.bundle.js查看它的源码（只展示一开始的一部分）：

ionic.views.Slider=ionic.views.View.inherit({

initialize:function(options){

varslider=this;

//utilities

varnoop=function(){};//simplenooperationfunction

varoffloadFn=function(fn){setTimeout(fn||noop,0);};//offloadafunctionsexecution

 

//checkbrowsercapabilities

varbrowser={

addEventListener:!!window.addEventListener,

touch:('ontouchstart'inwindow)||window.DocumentTouch&&documentinstanceofDocumentTouch,

transitions:(function(temp){

varprops=['transitionProperty','WebkitTransition','MozTransition','OTransition','msTransition'];

for(var i in props)if(temp.style[props[i]]!==undefined)returntrue;

return false;

})(document.createElement('swipe'))

};

var container=options.el;

//quitifnorootelement

if(!container)return;

var element=container.children[0];

var slides,slidePos,width,length;

options=options||{};

var index=parseInt(options.startSlide,10)||0;

var speed=options.speed||300;

options.continuous=options.continuous!==undefined?options.continuous:true;

 

function setup(){

//此为添加的代码

console.log('setup')

if(!container.offsetWidth){     return;

}

//此为添加的代码end

//cacheslides

slides=element.children;

length=slides.length;

 

阅读源代码后可以发现，setup方法是slidebox的主方法，所以我在setup的方法里面加了一个打印语句，看他在什么时间会执行这个方法。

测试期间，发现每当popover或者modal打开的时候，这个方法都会执行两次（原因不明），代码中：container返回的是整个slider的HTML代码片段，当他在页面中可见的时候，它的可见宽度大于0，反之为0，所以在我们跳转至其他页面的时候，它的可见宽度即变为0，这个时候我们只要阻止它改变当前的状态即可，所以加上return，这样问题就解决啦。

4.直接引入新的js，覆盖原来的

转载于:https://my.oschina.net/keysITer/blog/659014