【ionic框架bug】slidebox在使用model或popover後width變爲0的解決方案

【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查看它的源碼（只展示一開始的一部分）：

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之後引入，這樣才能實現覆蓋。

下載鏈接https://github.com/SimonZhangITer/ionic_slidebox/blob/master/slidebox.js