几个月的项目实战,走在适配安卓与ios的路上浪,总结经验,相互交流【2017/3/7起·持续更新】
【1】固定
副标题固定可使用
- <span style="font-family:SimHei;font-size:14px;"><ion-header-bar class="bar bar-subheader"></ion-header-bar> </span>
同理底部固定使用 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分展示多余数的数量,<span style="font-family:SimHei;">typeNum是tab的总数</span>
- 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的页面数据过快绑定造成的,由于其工作状态是时间监听,一直占着资源。有其他想法或者考虑的麻烦一同探讨,毕竟这东西是曾经的夜夜难寐