360SDN.COM

首页/Ionic/列表

ionic爬过的各种坑;(持续更新)

来源:  2017-06-25 07:40:49    评论:0点击:

1:判断当前设备是否iOS/andriod:

<script type="text/javascript">
var u = navigator.userAgent;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
alert('是否是Android:'+isAndroid);
alert('是否是iOS:'+isiOS);
</script>

 

2:在ion-content中,由于scorll 更新了页面数据后不能拖动到底部,html页面不能完全加载,原因在于当前页面没有更新size,解决方法引入$ionicScrollDelegate;

在controller里改变高度的地方调用方法:

$ionicScrollDelegate.resize;

 

 

 

//自定义搜索框

<form>
    <div class="bar bar-header item-input-inset" style="">
    <i class="icon ion-Android-search" style="position: absolute;color: #fdfdfd;font-size: 1.4em;top: 0px;margin-left: 4px;" ng-click="searchSelect()"></i>
    <div style="background-color:#fdfdfd;border-radius: 10px;width: 120%;">
      <label class="item-input-wrapper" id="search-input" style="background-color: #202020;margin:1px 1px 1px 1px;border-radius: 10px">
        <input style="padding-top: 0px;padding-bottom: 2px;margin-left:8px;color:#c4c7ca" type="search" placeholder="大家都在搜..." id=input1 ng-model="NO01">
      </label></div>
      <!-- <button class="button button-clear" style="color: #fefdfb" ng-click="searchSelect()">Go</button> -->
    </div>
</form>

 

3:上拉(或者当前页数据不足一页时)无限请求:

//html代码

<ion-list>

<ion-item class="" ng-repeat="item in items track by $index ">{{item.something}}</ion-item>

<ion-item><p style="text-align: center;" ng-if="!noMore">加载中。。。。。</p><p style="text-align: center;" ng-if="noMore">已加载全部数据。。。。。</p></ion-item>
    </ion-list>
    <ion-infinite-scroll on-infinite="loadmore();" icon="ion-load-a" ng-if="!noMore" distance="25px" ></ion-infinite-scroll>
        </ion-content>

//js代码

$scope.loadmore = function(){

$http(mypost)        //mypost为http头
.success(function(data){if (data.length<1) {
    console.log('到底了');
    $scope.noMore=true;
  }else{
    $scope.noMore=false;
  $scope.items = $scope.items.concat(data);
  console.log('data:',data);
  };

}).error(function(err){
  console.log(err);
})  

}

 

4:设置ng-repeat="item in items"循环数组显示的最大值(小于items.length):

设置过滤器 limitTo:

如:ng-repeat="item in items|limitTo:10“;

 

5:js时间:
var myDate = new Date();
myDate.getYear(); //获取当前年份(2位)
myDate.getFullYear(); //获取完整的年份(4位,1970-????)
myDate.getMonth(); //获取当前月份(0-11,0代表1月)
myDate.getDate(); //获取当前日(1-31)
myDate.getDay(); //获取当前星期X(0-6,0代表星期天)
myDate.getTime(); //获取当前时间(从1970.1.1开始的毫秒数)
myDate.getHours(); //获取当前小时数(0-23)
myDate.getMinutes(); //获取当前分钟数(0-59)
myDate.getSeconds(); //获取当前秒数(0-59)
myDate.getMilliseconds(); //获取当前毫秒数(0-999)
myDate.toLocaleDateString(); //获取当前日期
var mytime=myDate.toLocaleTimeString(); //获取当前时间
myDate.toLocaleString( ); //获取日期与时间

 

6:倒计时

//倒计时,需要注入$interval,参考一篇关于倒数60秒重新发送验证码的文章: http://www.codesec.NET/view/406326.html
  var interval = 1000;
function ShowTime(year,month,day,ho,mi,se)
{
var now = new Date();
var endDate = new Date(year, month-1, day,ho,mi,se);
var leftTime=endDate.getTime()-now.getTime();
var leftsecond = parseInt(leftTime/1000);
var day1=Math.floor(leftsecond/(60*60*24));
var hour=Math.floor((leftsecond-day1*24*60*60)/3600);
var minute=Math.floor((leftsecond-day1*24*60*60-hour*3600)/60);
var second=Math.floor(leftsecond-day1*24*60*60-hour*3600-minute*60);
console.log(day1,'天',hour,'小时',minute,'分钟',second,'秒');
}
var timer = $interval(function(){
  ShowCountDown(2017,3,17,17,0,0);
},1000);
 

7:有顶部tabs的页面(也带底部tabs)跳转到二级页面返回出现顶部tabs不能置顶的情况:在顶部tabs上方空出了一段nav-bar大小的空白

//需要指定class

<ion-tabs class="tabs-striped tabs-top tabs-color-stable"  ng-class="{'tabs-item-hide': $root.hideTabs}">

 

8:splash screen 在andriod中失效,显示黑屏:(该问题解决方案来着:http://www.wtoutiao.com/p/1eek75z.html ;原文中还提及content阻尼弹回效果,controller传值,安卓版本发布等多个问题的解决方案!)
主视图容器ion-nav-view是空的,而它的背景色是#000,所以修复方法是给里面塞个ion-view

 


<!-- 内容 --> <ion-nav-view> <!-- 防止启动时黑屏 --> <ion-view></ion-view> </ion-nav-view>

或者添css,把ion-nav-view的背景色改成白色。但问题还没解决,黑屏问题变成白屏问题了,解决方案比较麻烦

 

  1. 把splashscreen插件降级到v2.0.0

    v2.0.0之后的版本有bug,目前(2016/1/9)自带的版本是v3.0.0。先cd到项目文件夹,然后命令行:


    // 删掉现有版本 cordova plugin rm cordova-plugin-inappbrowser // 安装v2.0.0 cordova plugin add cordova-plugin-inappbrowser

     

  2. 改配置文件MyApp/config.xml


    <preference name="SplashScreen" value="screen"/> <preference name="AutoHideSplashScreen" value="false"/> <preference name="auto-hide-splash-screen" value="false"/> <preference name="ShowSplashScreenSpinner" value="false"/> <preference name="SplashMaintainAspectRatio" value="true" /> <preference name="SplashShowOnlyFirstTime" value="false"/> <preference name="SplashScreenDelay" value="10000"/>

     

    取消自动隐藏(改为代码控制隐藏),把持续时间改为较大的值(10秒),设置每次打开应用都显示splash screen

    P.S.默认只有SplashScreenSplashScreenDelay,需要把其它的(SplashMaintainAspectRatio可选)都添上

  3. 改app.js

    手动隐藏splash screen,在run里面添上


    .run(['$rootScope', function($rootScope) { // init // $rootScope.isLoading = false; // hide splash immediately if(navigator && navigator.splashscreen) { navigator.splashscreen.hide(); } }); }])

 

 

9:ionic andriod机型部分视频无法在video标签播放

// 可以通过iframe标签实现

<iframe ng-src="{{targetUrl}}" height="240px" width="100%" autostart="false" ng-if="isAndroid"></iframe>
      <video width="100%" height="240" ng-if="!isAndroid" ng-src="{{targetUrl}}" controls></video>

 

10:跟着上面,在获取请求来的视频不能播放,打印问题是"Error: [$interpolate:interr] Can't interpolate: {{item.videostr}} Error: [$sce:insecurl] Blocked loading resource from url not allowed by $sceDelegate policy.  URL: http://player.youku.com....

解决方法是在controller中引入$sce,

然后转换 videourl=$sce.trustAsResourceUrl(videourl);

 

11.eUr

//在cordova开发中如果出现 ERROR Internal navigation rejected - <allow-navigation> not set for url='xxx' 错误。(白名单)

 在config.xml文件中配置  

<allow-navigation href="*" />

 

 

12.设置了ng-if 后部分android机型还是不能显示slide-box里新加载的图片及内容的问题

//  实测在低版本Android机型上,使用了ng-if还是不能加载 ng-repeat出来的新加载的内容图片

//解决方案:在控制器引入$IonicSlideBoxDelegate;

在完成get/post请求获取服务器图片内容后  执行   $ionicSlideBoxDelegate.update();


来源:http://blog.csdn.net/qy492019878/article/details/50894559
为您推荐

友情链接 |九搜汽车网 |手机ok生活信息网|ok生活信息网|ok微生活
 Powered by www.360SDN.COM   京ICP备11022651号-4 © 2012-2016 版权