ionic项目实战-小白踩坑走起【2017/3/7起·持续更新】

几个月的项目实战，走在适配安卓与ios的路上浪，总结经验，相互交流【2017/3/7起·持续更新】

【1】固定
 副标题固定可使用         

<ion-header-bar class="bar bar-subheader"></ion-header-bar> 

同理底部固定使用  ion-footer-bar

组件的页面固定，不随页面滚动：在ion-content之前使用ion-nav-buttons,在标签里面就是你需要固定的组件，div或其他，需要使用relative进行定位使用top调节位置。页面滚动的时候标题栏是不会动的，所以这里其实就是相对标题栏定位，实现固定

【注意：】这里需要用ion-nav-bar标签把它包起来，否则页面切换的时候上一页面的组件可能会存在下一页面中。包起来才能在页面切换中销毁掉

<ion-view>    <ion-nav-bar>        <ion-nav-buttons>  主要代码</ion-nav-buttons>        </ion-nav-bar>   <ion-content>        </ion-content></ion-view>

【2】页面的带参跳转

 一般使用<a href="#/name/{id}"></a>,单一参数，把id或code值传过去下一个页面，多参数的时候建议使用$state.go

页面修改为<a href="" ng-click="go(x.id,x.code,x.name)"></a>   x是数据源,现需要传递3个参数到下一个页面

          controlers中：$scope.go=function(id,code,name){

                          $state.go('name',{sid:id,scode:code,sname:name})    //controllers记得添加服务$state

                    }

          在app.js中对应配置路径，在name页面对应使用$stateParams接受传递过来的参数使用

【3】仿新闻网站tab在[上面是滚动条tab,最右端有下拉键，点击出现所有tab标签，点击面板tab,滚动条自动滚动到对应位置，下面数据也同步刷新]

一般|难点主要在事件触发滚动自己滚动，而且滚动条视图中要有被点击tab

html中：<ion-scroll id="subjectScroll" delegate-handle="small"></ion-scroll> 设置滚动条

controllers.js中  var scrollWith=(document.getElementById("subjectScroll").offsetWidth)/4;  //我是用百分比的，计算每个tab所占具体像素

主要触发函数：

$scope.tabSlide=function(num){  //num是当前点击对象的序号    console.log(num);        var other=typeNum%4;//tab 4分展示多余数的数量，typeNum是tab的总数        var session=typeNum/4//tab模块数量，4个为一模块    var numLine=typeNum-other+1; //tab的邻界数，大于等于该数时为多余数序号    var endLine=typeNum-4;        if(num<4){        $ionicScrollDelegate.$getByHandle('small').scrollTo(0);        }        else{        $ionicScrollDelegate.$getByHandle('small').scrollTo(scrollWith*(num-3));        }            }

这里主要是我面板显示只会有4个，所以先考虑接口tab有多少个对应进行分组。scrollTo不是偏移量，是具体值。当点击小于4，则滚动条自然不用滚动，大于4则对应计算位置，触发滑动。代码不完整，更多是提供思路解决问题

【4】双向数据绑定设置为空
  初始化$scope.keyword={text:""};

 页面上使用keyword.text绑定ng-model

 设置为空使用命令$scope.keyword.text="";

【5】分页参数的使用（上拉加载）、下拉刷新

  services.js中

.factory('SeaService', ['$http',  function($http) {var seaService = {};try{seaService.getSea = function(Count,no,Word, Type, Token,callback) {//这里参数对应看接口需要$http({method: 'POST',url: //请求数据地址,params: {       //k,t,pno等都是接口的参数名，对应看接口需要的名k:Word,t:Type,pno:no,psize:Count,token:Token}}).success(function(response) {callback(true, response);}).error(function() {callback(false, '');});}}catch(error){}return seaService;}])

html中【数据渲染部分就不显示了】

<ion-infinite-scroll ng-if="hasmore" on-infinite="loadMore()" distance="1%"></ion-infinite-scroll>

controllers.js中

.controller('SeaCtrl', ['$scope', 'SearchService', '$stateParams',function($scope, SearchService, $stateParams,) {$scope.pSearch = [];//定义空数组，用于存放所有列表数据渲染页面$scope.hasmore = true;var run = false;var count = 0;var total =0;var isLoadMore = false; //是否正在执行上拉var t = 1;        var pageno=0 ;var pageCount=10;    /*判断是否加载完毕*/$scope.hasMoreData = function() {var hasMore = pageno * pageCount < total;console.log("pageno:" + pageno + "*" + "pageCount:" + pageCount + "----值" + total + " " + hasMore);return hasMore;}; $scope.loadMore = function() {       if(total==$scope.pSearch.length){$scope.hasmore=false;console.log("total的值："+total);$scope.$broadcast('scroll.infiniteScrollComplete');}isLoadMore = true;var old = $scope.pSearch;if(old.length != 0) {console.log("加载更多数据的入口");$scope.initData(3);} };/* state:1初始化，3加载更多 */$scope.initData = function(state) {console.log(!run);if(!run) {run = true;if(state == 3) {if(!$scope.hasmore) { // 加载完全$scope.$broadcast('scroll.infiniteScrollComplete');return;}}$scope.getGoodsList(state);} else {if(state == 3 || state == 1) {$scope.$broadcast('scroll.infiniteScrollComplete'); //广播事件结束isLoadMore = false;}}};$scope.getGoodsList = function(state) {try{pageno++;SearchService.getSearch(pageCount,pageno,k,t,token,function(isSuccess, response) {if(isSuccess) {  try{console.log("调用函数时候的pageno:"+pageno);if(state == 1) {console.log("请求拿到了第一次数据");$scope.pSearch = response.data.rows;console.log(JSON.stringify($scope.pSearch));  total = response.data.total;                                        $scope.hasmore =$scope.hasMoreData();if(response.data.total == 0) {$scope.tipRun = true;} try{  if($scope.pSearch.length == 0) { console.log('第一次请求没有数据');   }}catch(err){}} else {if(state == 3 && $scope.pSearch.length == 0) {$scope.hasmore = false;$scope.$broadcast('scroll.infiniteScrollComplete');} else {for(var i = 0; i < response.data.rows.length; i++) {$scope.pSearch.push(response.data.rows[i]);++count;console.log(count + pageCount);if(count +pageCount >= total) {$scope.hasmore = false;break;}}}}   }catch(err){                   console.log("请求不成功：原因可能token失效/网络状态不佳")    }} else {}if(isLoadMore) {$scope.$broadcast('scroll.infiniteScrollComplete'); //广播事件结束isLoadMore = false;}run = false;});}catch(error){alert("controller中商品搜索调用函数失败："+error);}};      $scope.initData(1);//进入页面直接加载初始数据}])

【1】下拉加载功能呢个标签的显示依赖ng-if=“hasmore”,hasmore为true的时候向上拉就会触发函数，为false时标签消失上拉加载功能自然消失。

【2】在controllers.js中最后一行可以看到调用initData(1)这个函数，一进入页面就会自然调用这个函数，，而且是优先，但是这里有个问题就是由于一进来页面是空的，所以loadmore函数会被触发，在loadmore中加了一层判断，判断当前列表数据的长度是否为空，为空则停掉这个函数。避免其请求，菊花一直转啊转。然后优先调用initData(1),初始化数据，拿到了第一次数据。这时候如果你页面向上拉，才会触发loadmore函数请求第二页数据，第二页数据采用的是push方法，循环加进第一次请求的数组中。

【3】判断结束，根据接口返回来的total值，进行比较。当count值=total值，表明当前已经请求完数据可以进行收尾工作

【下拉刷新的使用】

判：在页面中<ion-content>里是使用以下代码

<ion-refresher  pulling-text="释放刷新" refreshing-text="加载中" on-refresh="doRefresh()" ng-if="refresh" pulling-icon='ion-arrow-down-c' class="refresh"></ion-refresher>

判：on-refresh里面是刷新的方法，简单来说参考上面上拉加载中的方法，可以看到就是再次调用initData（1），就是初次进入页面时加载的方法，注意参数的重置为初始状态，这里需要修改下上拉加载的方法，就是在请求数据中添加刷新停止的语句。这样可以保证在下拉刷新的时候，确保请求完数据时候再关闭刷新图标。这样用户体验上比较好。，不多说贴上代码【代码是在上面介绍的上拉加载基础上做的修改，主要是添加了一句红色部分的代码】

$scope.getGoodsList = function(state) {try{pageno++;SearchService.getSearch(pageCount,pageno,k,t,token,function(isSuccess, response) {if(isSuccess) {  try{console.log("调用函数时候的pageno:"+pageno);if(state == 1) {console.log("请求拿到了第一次数据");$scope.pSearch = response.data.rows;console.log(JSON.stringify($scope.pSearch));  total = response.data.total;                                        $scope.hasmore =$scope.hasMoreData();                                        $scope.$broadcast('scroll.refreshComplete');if(response.data.total == 0) {$scope.tipRun = true;} try{  if($scope.pSearch.length == 0) { console.log('第一次请求没有数据');   }}catch(err){}} else {if(state == 3 && $scope.pSearch.length == 0) {$scope.hasmore = false;$scope.$broadcast('scroll.infiniteScrollComplete');} else {for(var i = 0; i < response.data.rows.length; i++) {$scope.pSearch.push(response.data.rows[i]);++count;console.log(count + pageCount);if(count +pageCount >= total) {$scope.hasmore = false;break;}}}}   }catch(err){                   console.log("请求不成功：原因可能token失效/网络状态不佳")    }} else {}if(isLoadMore) {$scope.$broadcast('scroll.infiniteScrollComplete'); //广播事件结束isLoadMore = false;}run = false;});}catch(error){alert("controller中商品搜索调用函数失败："+error);}};      $scope.initData(1);//进入页面直接加载初始数据

使用的刷新函数的代码是

$scope.doRefresh=function(){$scope.noDataTip=false;//没有更多数据的显示count = 0;        total=0;        pageno =0;        pageCount = 10;$scope.initData(1);}

【6】清除接口数据中的空格

  中：trim（）

for(var i=0;i<$scope.person.length;i++){$scope.person[i].peopleName=$scope.person[i].peopleName.trim();}

【7】点击出现弹框以及黑色遮罩层【其他方法制作】

  中：ionic自己有这个弹窗加上遮罩效果，但许多场景不好使用，黑色遮罩层可以考虑以下方法：

<ion-content> <div class="subject_black" ng-hide="subject_black" ng-click="hide()"></div>.subject_black{width:100%;height:100%;background:black;opacity:0.4;position:absolute;top:0px;left:0px;}

注意div放置在ion-content下一级首个子元素，利用content的宽度撑起黑色div实现全覆盖，点击黑色div消失则直接在div上绑定ng-click即可

【优化】：在不需要计算高度的地方，可以直接使用ng-if来设置遮罩以及弹框.如果随着页面滚动，弹窗和遮罩需要同步移动当前位置，就需要使用ng-hide/ng-show,使用这两个的缺陷是在ios上都会先闪一下再消失，在ipad上这种效果更加明显，用户体验不是很好。对应的修改是：把弹框部分的属性初始设置为position：relative,弹出显示的时候修改为position：absolute;把遮罩层的高度初始化设置为0%，当弹出时修改为100%。弹出框为relative的时候会消失，0%时候遮罩层会消失。这样保证了 页面在在进来初始状态就不会显示那两个，避免页面闪动。出现的时候需要controllers中事件获取对应div的id,然后使用css（）方法修改属性。

【8】获取鼠标点击对象的数据

  

$scope.brandFnc = function($element) {$scope.text = $element.target.innerText;console.log("点击数据为：" + $scope.text);     };

页面上对应使用：
<li ng-click="brandFnc($event)">
注意：括号参数不同

【9】页面上渲染 头/脸（A/B）此类型数据

  中：接口有可能传回数据只有A，单个的时候不好处理/符号

<span>{{x.firstname}}</span>{{x.firstname&&x.secondname?"/":""}}<span>{{x.secondname}}</span>

上下各控制A和B的显示，中间控制/的显示

【10】接口数据拼接url,接口传回数据html片段渲染页面

  中：response.url是接口中传来的数据，形式如:source/example/1/1.html, Locals.get('URL')是本地中的url头：形如：http://172.168.12.22/拼接地址：

$scope.trustSrc = function(src) {return $sce.trustAsResourceUrl(src);}$scope.url = Locals.get('URL') + response.url;//简单拼接$scope.pointURL = $scope.trustSrc($scope.url); //解决报错问题，将地址合法化

页面上使用 ng-include 将html渲染页面

<ion-content >     <div ng-include="pointURL"></div></ion-content>

【11】接口数据传回中含有富文本的处理

  中

.filter('trustHtml', function ($sce) {        return function (input) {            return $sce.trustAsHtml(input);        }})

<p class="content" ng-bind-html="newsDetail.content | trustHtml"></p>

注意：这里是ng-bind-html

【12】目录中含有数字时，在ios上会被识别为电话号码类的，会出现蓝色下划线，且其绑定添加的动态样式不生效

中：在index.html中头部添加

<meta name="format-detection" content="telephone=no"/>

【13】ionic与原生结合项目：页面跳转判断

 中：原生A页面直接跳到ionic的B页面，ionic项目中，C页面可以跳转到B页面，B页面返回的时候需要做判断，返回ionic项目页面还是原生页面。在页面中重新写按钮返回事件，事件详情如下；【注意引入相关服务】先判断返回历史有无，有就直接ionic项目中返回（h5），没有就说明当前是原生跳过来的，那就调用cordova方法（具体的方法名由原生那边提供）

Cordova.exec(function(result) {alert(result)   }, null, XXX, xxx, []);

这个代码就是原生已经写好的，到时controllers中直接使用就能起到返回的效果【主要看原生提供】

$scope.back= function() {if($ionicHistory.backView()){$scope.$ionicGoBack();}else{Cordova.exec(function(result) {alert(result)   }, null, XXX, xxx, []);}};

【14】ionic项目在ios中出现页面无法向上滑动的情况

 中：可以试试在页面ion-content标签中添加属性【至今解决过两个无法向上滑动问题】

<ion-content  overflow-scroll="true">

【15】点击事件触发了两次【冒泡事件】

 中：点击div时会触发两次函数，点击div实际也会点击ion-scroll，事件会向父元素传递，这里需要阻止冒泡，使用$event.stopPropagation()

 <ion-scroll  direction="xy" style="width:100%; height:100%">        <div style="width: 1000px; height: 1000px;" ng-click="show()" ></div>  </ion-scroll>

修改后的代码如下：
 <ion-scroll  direction="xy" style="width:100%; height:100%">        <div style="width: 1000px; height: 1000px;" ng-click="show();$event.stopPropagation()" ></div>  </ion-scroll>

这样点击就只会触发一次

【16】ionic结合原生的项目在ios上卡死
 中：ionic项目在安卓上可以流畅运行，但是在ios上会经常出现卡死的情况，尤其是在原生与h5页面交互请求数据的时候，目前是在页面controllers中设置的时间函数，每次函数请求的时候都设置延迟300ms，猜想的由于angular.js的页面数据过快绑定造成的，由于其工作状态是时间监听，一直占着资源。有其他想法或者考虑的麻烦一同探讨，毕竟这东西是曾经的夜夜难寐



                                             
        1        0           
	
				
	
					   
ionic项目实战-小白踩坑走起【2017/3/7起·持续更新】
	  	   
ionic项目实战-小白踩坑走起
	  	   
Ionic 3 项目实战------创建项目
	  	   
Ionic 3 项目实战------项目开发目录
	  	   
Ionic 3 项目实战------插件原理
	  	   
Ionic 3 项目实战------自定义插件
	  	   
【持续更新】【ionic】ionic命令大全（2017年6月10日17:31:26）
	  	   
Ionic开发中注意事项(持续更新)
	  	   
ionic实战之easyNote项目
	  	   
R语言实战--持续更新
	  	   
spark dataframe实战(持续更新)
	  	   
ionic实战之easyNote项目1.2（ionic源码）
	  	   
Ionic项目打包Android版本实战
	  	   
Ionic实战项目-跨平台App开发
	  	   
ionic实战项目从0开始
	  	   
GreenDAO 3.x项目开发实战持续更新ing — Android ORM框架(三)
	  	   
ionic爬过的各种坑；（持续更新）
	  	   
项目总结（持续更新）
	     		  
	  	   
SWOOLE编程细节知识
	  	   
COCOS2D创建菜单，按钮区域和文字显示不一致
	  	   
android媒体开发--OpenCore和Stagefright(一)
	  	   
JIRA状态为任务结束，但是解决结果为未解决相关配置
	  	   
从 MVC 到前后端分离
	  	   
ionic项目实战-小白踩坑走起【2017/3/7起·持续更新】
	  	   
算法提高 7-2求arccos值
	  	   
caffe学习（1）------windows下基于GPU配置
	  	   
决策树算法系列——GBDT
	  	   
Linux部署Java Project(带main方法)
	  	   
LitePal基本用法_01
	  	   
hokuyo激光雷达跑cartographer
	  	   
JavaScript 函数四种调用模式
	  	   
C#汉字转化成拼音的算法