ionic在ios侧滑页面空白
本人在ios10左右滑动的时候，经常出现左滑页面后退，然后整个页面空白现象，只能强行退出，并重新登录，最简单的方法就是禁用侧滑后退这个功能；
在app.js上config增加如下：
$ionicConfigProvider.views.swipeBackEnabled(false);
禁用视图滑动后退
ionic开发——禁止右滑返回上一页
ionic+angularjs，iphone手机页面滑动出现空白页面
ionic 处理ios侧滑白屏
【ionic+angularjs】iphone手机页面滑动出现空白页面
MMDrawerControlle只在一级页面有侧滑，其他页面没有，只需在一级页面这么操作即可
侧滑关闭activity之新特性SwipeBackActivity讲解
使用SwipeBackLayout实现滑动退出页面的效果
iOS,侧滑(最简单效果却很好的侧滑功能实现
没有更多推荐了，前端爱好者 学渣一枚 无聊写些东西
[Cordova/Phonegap] Cordova iOS 应用在第三方输入法的键盘弹出（点击输入框）时，页面不上移，导致输入框被键盘遮挡 的解决办法
原文链接：
Cordova iOS应用在使用系统自带输入法键盘的时候，聚焦文本框是会将整体webview界面上移的，如下图：
然而，如果你用的是第三方输入法（百度、搜狗、qq输入法等都是），聚焦文本框弹出键盘时，界面却不会整体上移，导致文本框被软键盘遮挡，如下图：
不仅被遮挡，靠底部的文本框还无法往上拖拽滚至可视区域。
解决办法一：第三方键盘弹出，实现界面也能上移
插件，在键盘弹出时，使用js代码将整体界面上移
界面上移，其实是window.scrollY改变了，而第三方键盘弹出时window.scrollY是一直为0的
1、添加插件
2、监听 native.keyboardshow 键盘弹出事件，在键盘弹出时，执行window.scrollTo(0, 键盘高度)，代码如下：
var isIOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //判断是iOS
if(isIOS) {
function keyboardShowHandler(e){
if(window.scrollY & 100) //键盘高度一般大于100，如果scrollY小于100，可以认为界面未上移，则需要手动上移
window.scrollTo(0, e.keyboardHeight);
function keyboardHideHandler(e){
if(window.scrollY != 0)
window.scrollTo(0, 0);
window.addEventListener('native.keyboardshow', keyboardShowHandler);
window.addEventListener('native.keyboardhide', keyboardHideHandler);
整体界面上移和iOS默认输入法键盘时的体验基本一致因为界面上移，文本框不会被键盘遮挡
假如你的Cordova应用有顶栏，顶栏可能会上移看不见虽然文本框不会被键盘遮挡，但是可能会上移到看不见的位置（比如点击的是靠顶部的文本框）
解决办法二：键盘弹出时，让webview高度收缩，类似安卓
插件，设置好插件提供的几个配置
1、添加插件：
2、在config.xml中加上2个配置（最好加在&platform name="ios"&节点下）
&preference name="KeyboardShrinksView" value="true" /&
&preference name="DisableScrollingWhenKeyboardShrinksView" value="true" /&第一个配置就是：键盘弹出时收缩webview（类似安卓下的行为）
第二个配置就是：禁止iOS默认键盘弹出时的界面上移行为
3、可能你需要在点击文本框，键盘弹出后，处理一下把文本框滚动到可视区域内。
高度收缩和安卓体验一致，顶栏不会随键盘出现而上移导致看不见
可能需要自己处理界面滚动，在界面收缩后把文本框滚动至可视区域。假如你用的是 Sencha Touch 或者 ExtJS6 Modern，可以查看《》如果用了iScroll、Sencha Touch、ExtJS6 Modern等框架，滚动条是css3 tranform模拟而非原生滚动，光标的显示会有点问题，但不影响输入，此问题有解决办法，可以查看《》
假如你用的是 Sencha Touch，那么下面的内容很重要：
如果你用的是ExtJs6 Modern，KeyboardShrinksView设为true，app界面是会收缩的；但如果你用的是Sencha Touch，你会发现界面居然没有收缩（ios8+）。
主要原因：
Sencha Touch做的Cordova app在ios下，&body&元素和Ext.Viewport的高度height和宽度width是固定的，如下图：
而ExtJs6 Modern做的Cordova app下则都是100%，如下图：
导致的结果就是Sencha Touch下Ext.Viewport高度是固定的，并不会随着webview收缩而收缩。
解决办法：
打开文件MyApp\touch\src\viewport\Ios.js
if (Ext.os.version.gtEq('7')) {
// iPad or Homescreen or UIWebView
if (Ext.os.deviceType === 'Tablet' || !Ext.browser.is.Safari || window.navigator.standalone) {修改为
if (Ext.os.version.gtEq('7') && Ext.os.version.lt('8')) { //加上判断版本小于8的
// iPad or Homescreen or UIWebView
if (Ext.os.deviceType === 'Tablet' || !Ext.browser.is.Safari || window.navigator.standalone) {(ExtJs6 Modern中就是这么写的)
这样，&body&元素和Ext.Viewport的高度和宽度就是100%，而不是固定值px了。也会随着webview收缩而收缩了。
在cordova中处理原生键盘相关问题的总结，mark供参考
Ionic Cordova实现软键盘的监听 以及操作大全
Cordova常用插件简介
cordova插件监听手机软键盘事件
cordova插件汇总大全
ionic 全屏显示页面 输入框被输入法遮盖
ionic-键盘覆盖输入框和返回键问题解决方案
ionic3 手机端软键盘遮挡问题
ionic3 footer上添加输入框，弹出键盘时，整个页面全部上移问题
ionic-点击input时键盘自动弹出
没有更多推荐了，
QQ上问我的时候，请描述清楚你的问题：
1、环境与背景(如ExtJS6.2)
2、步骤(关键代码或者截图)
3、预期现象
4、实际现象
5、最好有一个在线demo（如、）&nbsp>&nbsp
&nbsp>&nbsp
&nbsp>&nbsp
【ionic+angularjs】iphone手机页面滑动出现空白页面
摘要：在开发ionic的页面时,在iphone手机上使用时,屏幕的上下滑动经常会出现白屏(页面空白)。经分析得出出现这种情况的原因:1、在&ion-content/&标签中设置了属性overflow-scroll=&true&2、页面中所有元素在渲染后的高度没有超出允许展示的高度(不会出现滚动条)去掉属性overflow-scroll=&true&,即使用ionic原生滚动,不管页面中所有元素在渲染后的高度是否超出时都正常(这种做
在开发ionic的页面时,在iphone手机上使用时,屏幕的上下滑动经常会出现白屏(页面空白)。经分析得出出现这种情况的原因:
1、在&ion-content/&标签中设置了属性overflow-scroll=&true&
2、页面中所有元素在渲染后的高度没有超出允许展示的高度(不会出现滚动条)
去掉属性overflow-scroll=&true&,即使用ionic原生滚动,不管页面中所有元素在渲染后的高度是否超出时都正常(这种做法合不合理,大家可以探讨)。
ionic的js文档&ion-content/&的属性说明:
overflow-scroll &是否用溢出滚动代替Ionic原生滚动,默认false
$ionicConfigProvider的说明:
scrolling.jsScrolling(value)
Whether to use JS or Native scrolling. Defaults to native scrolling. Setting this to true has the same effect as setting each ion-content to have overflow-scroll='false'
开发的页面中若都是y轴滚动,那么使用js滚动或者ionic的原生滚动都可以(只要没有异常的兼容问题),若页面中涉及到横向滚动的元素,而没有设置overflow-scrol或者设置false,那么只能使用js滚动,若要使用ionic的原生滚动,比如&ion-sroll/&,则要设置overflow-scroll=&true&。
以上,请大家纠正或讨论,谢谢!
以上是的内容，更多
的内容，请您使用右上方搜索功能获取相关信息。
若你要投稿、删除文章请联系邮箱：zixun-group@service.aliyun.com,工作人员会在五个工作日内给你回复。
新用户大礼包！
现在注册，免费体验40+云产品，及域名优惠！
云服务器 ECS
可弹性伸缩、安全稳定、简单易用
&40.8元/月起
预测未发生的攻击
&24元/月起
你可能还喜欢
你可能感兴趣
阿里云教程中心为您免费提供
【ionic+angularjs】iphone手机页面滑动出现空白页面相关信息，包括
的信息，所有【ionic+angularjs】iphone手机页面滑动出现空白页面相关内容均不代表阿里云的意见！投稿删除文章请联系邮箱：zixun-group@service.aliyun.com，工作人员会在五个工作日内答复
售前咨询热线
支持与服务
资源和社区
关注阿里云
Internationalionic 教程
ionic 手势事件
长按的时间是500毫秒。
&&&&on-hold="onHold()"
&&&&class="button"&
&&&&&/button&
这个是手势轻击事件，如果长按时间超过250毫秒，那就不是轻击了。。
&&&&on-tap="onTap()"
&&&&class="button"&
&&&&&/button&
on-double-tap
手双击屏幕事件
&&&&on-double-tap="onDoubleTap()"
&&&&class="button"&
&&&&&/button&
这个和 on-tap 还是有区别的，这个是立即执行，而且是用户点击立马执行。不用等待 touchend/mouseup 。
&&&&&button on-touch="onTouch()"
&&&&class="button"&
&&&&&/button&
on-release
当用户结束触摸事件时触发。
&&&&on-release="onRelease()"
&&&&class="button"&
这个有点类似于PC端的拖拽。当你一直点击某个物体，并且手开始移动，都会触发 on-drag。
&&&&on-drag="onDrag()"
&&&&class="button"&
on-drag-up
向上拖拽。
&&&&on-drag-up="onDragUp()"
&&&&class="button"&
on-drag-right
向右拖拽。
&&&&on-drag-right="onDragRight()"
&&&&class="button"&
on-drag-down
向下拖拽。
&&&&on-drag-down="onDragDown()"
&&&&class="button"&
on-drag-left
向左边拖拽。
&&&&on-drag-left="onDragLeft()"
&&&&class="button"&
指手指滑动效果，可以是任何方向上的。而且也和 on-drag 类似，都有四个方向上单独的事件。
&&&&on-swipe="onSwipe()"
&&&&class="button"&
on-swipe-up
向上的手指滑动效果。
&&&&on-swipe-up="onSwipeUp()"
&&&&class="button"&
on-swipe-right
向右的手指滑动效果。
&&&&on-swipe-right="onSwipeRight()"
&&&&class="button"&
on-swipe-down
向下的手指滑动效果。
&&&&on-swipe-down="onSwipeDown()"
&&&&class="button"&
on-swipe-left
向左的手指滑动效果。
&&&&on-swipe-left="onSwipeLeft()"
&&&&class="button"&
$ionicGesture
一个angular服务展示ionicionic.EventController手势。
on(eventType, callback, $element)
在一个元素上添加一个事件监听器。
监听的手势事件。
function(e)
当手势事件发生时触发的事件。
angular元素监听的事件。
off(eventType, callback, $element)
在一个元素上移除一个手势事件监听器。
移除监听的手势事件。
function(e)
移除监听器。
被监听事件的angular元素。
感谢您的支持，我会继续努力的!
扫码打赏，你说多少就多少
记住登录状态
重复输入密码ionic 教程
ionic 滚动条
ion-scroll
ion-scroll 用于创建一个可滚动的容器。
&ion-scroll
&&&&[delegate-handle=""]
&&&&[direction=""]
&&&&[paging=""]
&&&&[on-refresh=""]
&&&&[on-scroll=""]
&&&&[scrollbar-x=""]
&&&&[scrollbar-y=""]
&&&&[zooming=""]
&&&&[min-zoom=""]
&&&&[max-zoom=""]&
&/ion-scroll&
delegate-handle
该句柄利用$ionicScrollDelegate指定滚动视图。
滚动的方向。 'x' 或 'y'。 默认 'y'。
分页是否滚动。
on-refresh
调用下拉刷新， 由ionRefresher触发。
当用户滚动时触发。
scrollbar-x
是否显示水平滚动条。默认为false。
scrollbar-y
是否显示垂直滚动条。默认为true。
是否支持双指缩放。
允许的最小缩放量（默认为0.5）
允许的最大缩放量（默认为3）
&ion-scroll zooming="true" direction="xy" style="width: 500 height: 500px"&
&&&&&div style="width: 5000 height: 5000 background: url('http://www.runoob.com/try/demo_source/Europe_geological_map-en.jpg') repeat"&&/div&
&/ion-scroll&
cursor: url('http://www.runoob.com/try/demo_source/finger.png'),
JavaScript 代码
angular.module('ionicApp', ['ionic']);
ion-infinite-scroll
当用户到达页脚或页脚附近时，ionInfiniteScroll指令允许你调用一个函数 。
当用户滚动的距离超出底部的内容时，就会触发你指定的on-infinite。
&ion-content ng-controller="MyController"&
&ion-infinite-scroll
on-infinite="loadMore()"
distance="1%"&
&/ion-infinite-scroll&
&/ion-content&
function MyController($scope, $http) {
$scope.items = [];
$scope.loadMore = function() {
$http.get('/more-items').success(function(items) {
useItems(items);
$scope.$broadcast('scroll.infiniteScrollComplete');
$scope.$on('stateChangeSuccess', function() {
$scope.loadMore();
当没有更多数据加载时，就可以用一个简单的方法阻止无限滚动，那就是angular的ng-if 指令:
&ion-infinite-scroll
ng-if="moreDataCanBeLoaded()"
icon="ion-loading-c"
on-infinite="loadMoreData()"&
&/ion-infinite-scroll&
on-infinite
当滚动到底部时触发的事件。
从底部滚动到触发on-infinite表达式的距离。默认: 1%。
当加载时显示的图标。默认: 'ion-loading-d'。
$ionicScrollDelegate
授权控制滚动视图（通过ion-content 和 ion-scroll指令创建）。
该方法直接被$ionicScrollDelegate服务触发，来控制所有滚动视图。用 $getByHandle方法控制特定的滚动视图。
&body ng-controller="MainCtrl"&
&ion-content&
&button ng-click="scrollTop()"&滚动到顶部!&/button&
&/ion-content&
function MainCtrl($scope, $ionicScrollDelegate) {
$scope.scrollTop = function() {
$ionicScrollDelegate.scrollTop();
告诉滚动视图重新计算它的容器大小。
scrollTop([shouldAnimate])
shouldAnimate
是否应用滚动动画。
scrollBottom([shouldAnimate])
shouldAnimate
是否应用滚动动画。
感谢您的支持，我会继续努力的!
扫码打赏，你说多少就多少
记住登录状态
重复输入密码