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 状态栏

      ..platformsandroid esxmlconfig.xml 文件下面的配置

将此配置改为：

<preference name="Fullscreen" value="false"/>（否则在Android上状态栏显示不出来）.
ios 版本 如果状态栏如果被档住部分，可能是需要在 node js 命令行中 build 一下，
 ionic build ios