ionic爬过的各种坑；（持续更新）_ion- content组件报错-CSDN博客

本文链接：https://blog.csdn.net/qy492019878/article/details/50894559

本文总结了在 Ionic 开发过程中遇到的各种问题及其解决方法，包括：设备判断、ion-content 滚动问题、无限滚动加载、ng-repeat 数组限制、时间处理、倒计时实现、顶部tabs显示异常、启动屏显示问题、Android 视频播放和安全策略配置等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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;

//自定义搜索框

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中失效，显示黑屏：（该问题解决方案来着：“www.”+“wtoutiao.co”+m/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的背景色改成白色。但问题还没解决，黑屏问题变成白屏问题了，解决方案比较麻烦

把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
```

改配置文件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.默认只有SplashScreen和SplashScreenDelay，需要把其它的（SplashMaintainAspectRatio可选）都添上

改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标签实现

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.co....

解决方法是在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();