ionic 項目筆記

最近公司在用ionic 做 微站，項目中難免遇到一些問題.總結如下：

1.       改了Slidebox 動態綁定圖片時，頁面會顯示一片空白，改變窗口大小的時候，圖片就出來了，說明動態綁定圖片時，需要手動去重繪頁面,即調用$ionicSlideBoxDelegate.Update()方法。

　　動態綁定之后圖片不會循環播放，需要在控制器中寫行代碼：$ionicSlideBoxDelegate.$getByHandle("slideboximgs").loop(true);

　　slideboximgs 需要從 view 中傳過來，完成的代碼如下：

　　

<ion-slide-box auto-play="true" does-continue="true" show-pager="true" id="detail-slide-box" delegate-handle="slideboximgs">
            <ion-slide ng-repeat="img in product.Product.ImagePath">
                <a><img ng-src="{{img|ServerImage}}" alt=""></a>
            </ion-slide>           
        </ion-slide-box>

 

//產品詳情
.controller('ProductDetailCtrl', ['$scope', '$rootScope', '$state','productService','$stateParams','ionicToast','$ionicSlideBoxDelegate',
     function($scope, $rootScope, $state,productService,$stateParams,ionicToast,$ionicSlideBoxDelegate) {
    
    productService.detail($stateParams.pram1,0).success(function(data){
        if (data.result>0) {
            $scope.product = data.table;
            $ionicSlideBoxDelegate.update();//重繪，讓圖片顯示出來
            $ionicSlideBoxDelegate.$getByHandle("slideboximgs").loop(true);//讓圖片輪播
        }else{
            ionicToast.show(data.msg, 'middle', false, 4000);
        }
    });

    //立即下單
    $scope.submit = function() {         
        location.href = '#/tab/' + $rootScope.tabname + '/Submit/submit/0';
    }
}])

 

2.       SideMenu 控件，使用時在菜單上面點來點去，再次訪問已經點擊過的菜單 的時候，SideMenu不會縮回去,而且有時候頁面點都點不動，需要調用 menu-close 指令強制將菜單關閉。<li menu-close><a href=”##”>菜單1</a></li>

3.   Android機播放視頻的問題

　　使用 ng-video解決播放問題，

　　參考地址：https://www.npmjs.com/package/ng-video#configuration

(1).使用bower 安裝下載ngvideo包（需要git環境，網上百度下載git，然后配置一下path環境變量，重啟電腦），如果沒有裝git，在下載包的時候node.js控制台會給出錯誤提示，百度一下錯誤提示就可以正確安裝git環境了。

(2)下載完了之后有一個ng-video.js文件，引用ng-video.js文件，module 依賴於ngVideo,添加ngVideo依賴,剩下的事情就是在頁面上寫指令了，具體操作看參考地址。

上面的所有步驟完成了,Android如果還是播放不了，要在視頻播放頁面的 ion-content 添加一個屬性 overflow-scroll=”true”，大功告成。

 

在github 上面搜索ng-video可以下載demo看看，上面的demo直播播放不了，要小小的修改一下代碼，其實就是文件引用問題.

4.       有時候會莫名其妙的轉換到默認頁（或者說跳轉到首頁）,可能原因是某個代碼段中包括了href=”#”，去掉即可。

5.       目前不知道什么原因，在iPhone 6 plus,iPhone 6s上面，頁面切換會有閃屏的現象，他們的共同點是ios9.0以上，

　　解決方法：http://www.haomou.net/2015/10/27/2015_ionic_ios9_patch/

很多問題都可以在ionc官網上面找到答案，http://forum.ionicframework.com/ 大家如果碰到一些自己解決不了的問題，可以在里面搜索，希望可以幫助到你們。

6. ion-scroll 控件 自動設置高度。

　　在項目中 碰到element.bind("scroll")綁定滾動事件的時候無效，后來改用ion-scroll容器，用它自帶的onscroll事件，加上下面這行代碼就OK了。

　　$("ion-scroll").height($("ion-nav-view[name='tab-home']").height());//設置高度為視圖容器的高度，然后下面無論多高都行了

7.StatusBar 狀態欄

      ..\platforms\android\res\xml\config.xml 文件下面的配置

將此配置改為：

<preference name="Fullscreen" value="false"/>（否則在Android上狀態欄顯示不出來）.
ios 版本 如果狀態欄如果被檔住部分，可能是需要在 node js 命令行中 build 一下，
 ionic build ios