https://github.com/simonzhangiter/ionic_slidebox
【ionic框架bug】slidebox在使用model或popover后width变为0的解决方案
https://github.com/simonzhangiter/ionic_slidebox
Last synced: 4 months ago
JSON representation
【ionic框架bug】slidebox在使用model或popover后width变为0的解决方案
- Host: GitHub
- URL: https://github.com/simonzhangiter/ionic_slidebox
- Owner: SimonZhangITer
- Created: 2016-09-20T02:23:58.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-04-23T04:04:14.000Z (about 8 years ago)
- Last Synced: 2025-01-03T09:14:28.403Z (5 months ago)
- Homepage:
- Size: 6.84 KB
- Stars: 1
- Watchers: 3
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
#【ionic框架bug】slidebox在使用model或popover后width变为0的解决方案
##问题描述
> 如果在silideBox上使用缓存，那么在进入另一个state之后，打开一个Popover或者一个Modal，再返回原来的页面，则slideBox的width变为0，即看不见silideBox的内容了 。
#解决方案
###一.使用ng-if
即不使用缓存，但是这样的弊端就是没有缓存-.-，其实原理就是每次重新渲染slidebox。
###二.使用$ionicSlideBoxDelegate.update()
在每次进入页面的时候执行此方法，会让slideBox重新计算宽度和高度。判断进入页面的方法可以是监听\$ionicView.enter或者$stateChangeSuccess，建议后者，其中封装的有stateFrom、stateTo等方法方便判断页面的跳转，并且反应较前者快很多。
###三.修改ionic源码（建议）
为什么说这个是ionic的框架bug，就是因为它的源码写的有缺陷，导致一些莫名其妙的问题。所以打开ionic.bundle.js查看它的源码（只展示一开始的一部分）：
``` javascript
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，这样问题就解决啦。
###四.直接引入修改好的js片段，覆盖原来的slidebox代码
需要注意的是，在index页面的引入顺序，sliderView.js一定要在ionic.bundle.js之后引入，这样才能实现覆盖。
下载链接