如何解决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 面向对象的JavaScript类
May 04 Javascript
简单实用jquery版三级联动select示例
Jul 04 Javascript
js对table的td进行相同内容合并示例详解
Dec 27 Javascript
批量修改标签css样式以input标签为例
Jul 31 Javascript
基于jQuery实现仿淘宝套餐选择插件
Mar 04 Javascript
jQuery关键词说明插件cluetip使用指南
Apr 21 Javascript
轻松掌握jQuery中wrap()与unwrap()函数的用法
May 24 Javascript
Vue.js手风琴菜单组件开发实例
May 16 Javascript
基于BootStrap的前端分页带省略号和上下页效果
May 18 Javascript
vue轮播图插件vue-awesome-swiper
Nov 27 Javascript
用react-redux实现react组件之间数据共享的方法
Jun 08 Javascript
小程序websocket心跳库(websocket-heartbeat-miniprogram)
Feb 23 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
js获取url中的参数且参数为中文时通过js解码
2014/03/19 Javascript
将数字转换成大写的人民币表达式的js函数
2014/09/21 Javascript
javascript中String对象的slice()方法分析
2014/12/20 Javascript
JSONP跨域GET请求解决Ajax跨域访问问题
2014/12/31 Javascript
浅析Javascript中bind()方法的使用与实现
2016/05/30 Javascript
精彩的Bootstrap案例分享 重点在注释!(选项卡、栅格布局)
2016/07/01 Javascript
使用 electron 实现类似新版 QQ 的登录界面效果(阴影、背景动画、窗体3D翻转)
2018/10/23 Javascript
关于element-ui的隐藏组件el-scrollbar的使用
2019/05/29 Javascript
Vue父子传递实例讲解
2020/02/14 Javascript
vue组件添加事件@click.native操作
2020/10/30 Javascript
[05:01]3.19DOTA2发布会 我们都是刀塔人
2014/03/25 DOTA
[09:40]DAC2018 4.5 SOLO赛 MidOne vs Miracle
2018/04/06 DOTA
Python 元组(Tuple)操作详解
2014/03/11 Python
关于python的bottle框架跨域请求报错问题的处理方法
2017/03/19 Python
Python并发编程协程(Coroutine)之Gevent详解
2017/12/27 Python
Python 使用with上下文实现计时功能
2018/03/09 Python
pytorch构建多模型实例
2020/01/15 Python
python文件及目录操作代码汇总
2020/07/08 Python
Python 如何创建一个简单的REST接口
2020/07/30 Python
利用Python实现Json序列化库的方法步骤
2020/09/09 Python
使用Python爬取Json数据的示例代码
2020/12/07 Python
pycharm 实现光标快速移动到括号外或行尾的操作
2021/02/05 Python
美国存储和组织商店:The Container Store
2017/08/16 全球购物
苏格兰销售女装、男装和童装的连锁店:M&Co
2018/03/16 全球购物
代理商会议邀请函
2014/01/27 职场文书
《跨越海峡的生命桥》教学反思
2014/02/24 职场文书
2014国培学习感言
2014/03/05 职场文书
驾驶员培训方案
2014/05/01 职场文书
会计专业自荐书
2014/07/08 职场文书
代理人委托书
2014/08/01 职场文书
小学毕业典礼演讲稿
2014/09/09 职场文书
2015年“世界无车日”活动方案
2015/05/06 职场文书
成事在人观后感
2015/06/16 职场文书
干部培训简讯
2015/07/20 职场文书
如何使用分区处理MySQL的亿级数据优化
2021/06/18 MySQL
Python使用pandas导入xlsx格式的excel文件内容操作代码
2022/12/24 Python