解决问题集锦-Ionic

? ionic-v1 $ionicScrollDelegate scroll methods don’t work on iOS

登录界面,键盘弹起,界面向上滚动scrollTop(),键盘收起,界面恢复scrollTo()。结果ios不起作用,Android可以,ios下看了效果,transform: translate3d(0px, valuepx, 0px) scale(1) 中value根本不是自己设置的值

➣解决:
向上滚动的css:

<!-- 值自己设置 -->
.login-scroll .scroll{
transform: translate3d(0px, -157px, 0px) scale(1) !important;
}

html:

<ion-content ng-class="{'login-scroll':loginScroll}"></ion-content>

监听键盘弹起与收起:

$scope.loginScroll=false;//默认为false

function keyboardshow(e) {
$scope.loginScroll=true;
// $ionicScrollDelegate.scrollTo(0, 155, true);//ios不管用
}
function keyboardhide(e) {
$scope.loginScroll=false;
// $ionicScrollDelegate.scrollTop(true);//ios不管用
}
window.addEventListener('native.keyboardshow', keyboardshow);
window.addEventListener('native.keyboardhide', keyboardhide);

?ionic项目中锚点跳转

➣解决:

<!-- <div id="itguliang" >-->
$location.hash('itguliang');//id
$anchorScroll();

?ionic项目中$location.hash、$anchorscroll锚点跳转后,ios下页面无法向上滑动,只允许向下滑动

➣解决:

<!-- 加上 overflow-scroll="true" -->
<ion-content overflow-scroll="true">

?Ionic 调用键盘搜索

html:

<form action="#">
<input type="search" placeholder="输入关键字"
ng-model="search.key" ng-focus="searchInput()"
ng-enter="doSearch(search.key)">
</form>

directive:

.directive('ngEnter', function() {
return function(scope, element, attrs) {
element.bind("keydown keypress", function(event) {
if(event.which === 13) {
scope.$apply(function(){
scope.$eval(attrs.ngEnter);
});
event.preventDefault();
}
});
};
});

?angularjs中ui-sref传递参数

<div class="col" ui-sref="app.home-search({flag:'course'})"></div>
<div class="col" ui-sref="app.home-search({type: 1, role: 2})"></div>

?angularjs中$http模块POST请求request payload转form data

对接后台接口,用post不成功,后台人员截图过来又说他那边可以,对比过后发现angular post请求表单参数在Request payload
他的在Form data,搜了解决方法有两种

解决1配置$httpProvider:

var myApp = angular.module('app',[]);  
myApp.config(function($httpProvider){

$httpProvider.defaults.transformRequest = function(obj){
var str = [];
for(var p in obj){
str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
}
return str.join("&");
}

$httpProvider.defaults.headers.post = {
'Content-Type': 'application/x-www-form-urlencoded'
}

});

解决2在post中配置:

var url = ApiService.getEndpoint() + "api/feedback/appSave.do";
return $http({
url: url,
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
},
transformRequest: function(obj) {
var str = [];
for (var p in obj) {
str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
}
return str.join("&");
},
data: data
});

ps:如果加载了jquery可以直接这样使用

transformRequest : function(data){
return $.param(data);
}

?滑动到屏幕顶端不是内容顶端

var scroll = document.getElementById(id).offsetTop - $ionicScrollDelegate.getScrollPosition().top;
$ionicScrollDelegate.resize();
$ionicScrollDelegate.scrollBy(0, scroll, true);

?Ionic清除某一页面的cache

$ionicHistory.clearCache(["tab.aa","tab.bb"]).then(function() {
$state.go('tab.home');
});

?angular video ng-src 不起作用

app.filter('trusted', ['$sce', function ($sce) {
return function(url) {
return $sce.trustAsResourceUrl(url);
};
}]);
<video controls poster="img/poster.png">
<source ng-src="{{object.src | trusted}}" type="video/mp4"/>
</video>

?Ionic angular切换语言 国际化问题

移步至:Ionic angular国际化问题

?config.xml设置KeyboardDisplayRequiresUserAction为true,实现评论键盘自动弹出的功能(没试过)

<preference name="KeyboardDisplayRequiresUserAction" value="false" />

?网络情况$cordovaNetwork

$rootScope.$on('$ionicView.afterEnter', function(scopes, states) {
if (window.cordova) {
var type = $cordovaNetwork.getNetwork();

if (type == '2g' || type == 'none'|| type == 'unknown') {
$cordovaToast.showLongCenter('当前网络慢,请在网络顺畅情况下使用');
}
}
});

?ion-slide-box ng-repeat 刷新不显示问题

ion-slide-box ng-repeat 刷新或者点击其他再回到页面ion-slide-box会不见

<div class="slider-slides" ng-transclude="" style="width: 0px;">

就是这个width会变为0

http://forum.ionicframework.com/t/ion-slide-box-and-ng-repeat/9826

评论