如何解决IONIC页面底部被遮住无法向上滚动问题


Posted in Javascript onSeptember 06, 2016

Ionic 是目前最有潜力的一款 HTML5 手机应用开发框架。通过 SASS 构建应用程序,它 提供了很多 UI 组件来帮助开发者开发强大的应用。 它使用 JavaScript MVVM 框架和 AngularJS 来增强应用。提供数据的双向绑定,使用它成为 Web 和移动开发者的共同选择。

ionic 特点

1.ionic 基于Angular语法,简单易学。[3]

2.ionic 是一个轻量级框架。

3.ionic 完美的融合下一代移动框架,支持 Angularjs 的特性, MVVM ,代码易维护。

4.ionic 提供了漂亮的设计,通过 SASS 构建应用程序,它提供了很多 UI 组件来帮助开发者开发强大的应用。

5.ionic 专注原生,让你看不出混合应用和原生的区别

6.ionic 提供了强大的命令行工具。

7.ionic 性能优越,运行速度快。

IONIC作为目前最为火热的框架,在开发过程中我们同样会遇到各种各样奇葩的问题,比如下面这个:

问题描述:

在页面底部有一个按钮,点击这个按钮会额外显示一些数据,此时页面会超出,需要滚动效果,同样的场景对于ion-list 的infinate效果,但是偶尔会出现,无法滚动的问题,手指向上拖动,松开后又弹回原来位置,始终看不到底部数据,这是因为ionic view没有重新计算新增高度的问题。

解决方案

我们需要应用到ionic的一个滚动代理,名字叫做$ionicScrollDelegate, 使用时候我们需要注入这个代理。

this.$timeout(() => {
this.$ionicScrollDelegate.resize();
},410);

如上,代理中有一个方法叫做resize(), 就是重新计算高度的, 这个我加了一个timeout, 用于确保数据正常长渲染完后再resize。

以上所述是小编给大家介绍的IONIC页面底部被遮住无法向上滚动问题的解决方案,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript confirm选择判断
Oct 18 Javascript
JavaScript fontsize方法入门实例(按照指定的尺寸来显示字符串)
Oct 17 Javascript
JavaScript常用的弹出广告及背投广告实现方法
Feb 06 Javascript
javascript判断数组内是否重复的方法
Apr 21 Javascript
JavaScript学习笔记整理之引用类型
Jan 22 Javascript
jQuery使用zTree插件实现树形菜单和异步加载
Feb 25 Javascript
jQuery插件passwordStrength密码强度指标详解
Jun 24 Javascript
VC调用javascript的几种方法(推荐)
Aug 09 Javascript
JSONP和批量操作功能的实现方法
Aug 21 Javascript
js设置和获取自定义属性的方法
Oct 20 Javascript
JS身份证信息验证正则表达式
Jun 12 Javascript
防止页面url缓存中ajax中post请求的处理方法
Oct 10 Javascript
Vue.js每天必学之过渡与动画
Sep 06 #Javascript
Vue.js 父子组件通讯开发实例
Sep 06 #Javascript
Vuejs第十篇之vuejs父子组件通信
Sep 06 #Javascript
Vue.js每天必学之方法与事件处理器
Sep 06 #Javascript
基于JavaScript实现购物网站商品放大镜效果
Sep 06 #Javascript
AngularGauge 属性解析详解
Sep 06 #Javascript
AngularJS 面试题集锦
Sep 06 #Javascript
You might like
php中计算时间差的几种方法
2009/12/31 PHP
php在页面中调用fckeditor编辑器的方法
2011/06/10 PHP
采用header定义为文件然后readfile下载(隐藏下载地址)
2014/01/31 PHP
PHP+FastCGI+Nginx配置PHP运行环境
2014/08/07 PHP
PHP大转盘中奖概率算法实例
2014/10/21 PHP
Joomla使用Apache重写模式的方法
2016/05/04 PHP
PHP进行批量任务处理不超时的解决方法
2016/07/11 PHP
完美解决php 导出excle的.csv格式的数据时乱码问题
2017/02/18 PHP
thinkPHP中钩子的使用方法实例分析
2017/11/16 PHP
Knockout text绑定DOM的使用方法
2013/11/15 Javascript
JavaScript每天定时更换皮肤样式的方法
2015/07/01 Javascript
jQuery简单实现验证邮箱格式
2015/07/15 Javascript
聊聊Vue.js的template编译的问题
2017/10/09 Javascript
vue.js项目nginx部署教程
2018/04/05 Javascript
VUE+Element环境搭建与安装的方法步骤
2019/01/24 Javascript
小程序如何使用分包加载的实现方法
2019/05/22 Javascript
JavaScript 继承 封装 多态实现及原理详解
2019/07/29 Javascript
vue全屏事件开发详解
2020/06/17 Javascript
js闭包的9个使用场景
2020/12/29 Javascript
用Python代码来解图片迷宫的方法整理
2015/04/02 Python
Python IDLE清空窗口的实例
2018/06/25 Python
Python3 itchat实现微信定时发送群消息的实例代码
2019/07/12 Python
Python使用微信itchat接口实现查看自己微信的信息功能详解
2019/08/22 Python
基于Python实现船舶的MMSI的获取(推荐)
2019/10/21 Python
canvas实现有递增动画的环形进度条的实现方法
2019/07/10 HTML / CSS
Supersmart英国:欧洲市场首批食品补充剂供应商之一
2018/05/05 全球购物
在阿尔卑斯山或希腊度过快乐假期:Alpine Elements
2019/12/28 全球购物
工程力学硕士生的自我评价范文
2013/11/16 职场文书
总经理秘书的岗位职责
2013/12/27 职场文书
大学学习个人的自我评价
2014/02/18 职场文书
《植物妈妈有办法》教学反思
2014/02/25 职场文书
现金出纳岗位职责
2014/03/15 职场文书
幼儿园园长新年寄语2015
2014/12/08 职场文书
保证书格式
2015/01/16 职场文书
简历自我评价范文
2019/04/24 职场文书
详解JAVA的控制语句
2021/11/11 Java/Android