如何解决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 相关文章推荐
基于JQuery制作的产品广告效果
Dec 08 Javascript
javascript中RegExp保留小数点后几位数的方法分享
Aug 13 Javascript
javascript自定义函数参数传递为字符串格式
Jul 29 Javascript
jquery密码强度校验
Dec 02 Javascript
jQuery根据表单name获取值的方法
May 24 Javascript
基于javascript实现最简单选项卡切换
Feb 01 Javascript
vue分类筛选filter方法简单实例
Mar 30 Javascript
微信小程序实现给循环列表添加点击样式实例
Apr 26 Javascript
js仿微信抢红包功能
Sep 25 Javascript
基于wordpress的ajax写法详解
Jan 02 Javascript
vue 全选与反选的实现方法(无Bug 新手看过来)
Feb 09 Javascript
JavaScript数组常用的增删改查与其他属性详解
Oct 13 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
本地计算机无法启动Apache故障处理
2014/08/08 PHP
PHP面向对象程序设计之对象生成方法详解
2016/12/02 PHP
使用ucenter实现多站点同步登录的讲解
2019/03/21 PHP
由document.body和document.documentElement想到的
2009/04/13 Javascript
jquery使用ColorBox弹出图片组浏览层实例演示
2013/03/14 Javascript
jQuery插件开发的五种形态小结
2015/03/04 Javascript
jQuery Real Person验证码插件防止表单自动提交
2015/11/06 Javascript
关于javascript中dataset的问题小结
2015/11/16 Javascript
Bootstrap每天必学之弹出框(Popover)插件
2016/04/25 Javascript
html+js+highcharts绘制圆饼图表的简单实例
2016/08/04 Javascript
Json按某个键的值进行排序
2016/12/22 Javascript
jquery与ajax获取特殊字符实例详解
2017/01/08 Javascript
vue2.0中goods选购栏滚动算法的实现代码
2017/05/17 Javascript
基于node.js express mvc轻量级框架实践
2017/09/14 Javascript
jQuery实现遍历XML节点和属性的方法示例
2018/04/29 jQuery
vue新vue-cli3环境配置和模拟json数据的实例
2018/09/19 Javascript
vue中datepicker的使用教程实例代码详解
2019/07/08 Javascript
vuex存值与取值的实例
2019/11/06 Javascript
压缩Vue.js打包后的体积方法总结(Vue.js打包后体积过大问题)
2020/02/03 Javascript
python socket网络编程步骤详解(socket套接字使用)
2013/12/06 Python
利用Django-environ如何区分不同环境
2018/08/26 Python
Python数据可视化:泊松分布详解
2019/12/07 Python
keras中的History对象用法
2020/06/19 Python
Python使用pickle进行序列化和反序列化的示例代码
2020/09/22 Python
CSS3中的content属性使用示例
2015/07/20 HTML / CSS
电大自我鉴定范文
2013/10/01 职场文书
党的群众教育实践活动实施方案
2014/06/12 职场文书
创先争优个人承诺书
2014/08/30 职场文书
机关领导查摆四风思想汇报
2014/09/13 职场文书
员工培训协议书
2014/09/15 职场文书
贪污受贿检讨书范文
2014/11/19 职场文书
车间统计员岗位职责
2015/04/14 职场文书
道歉的话怎么说
2015/05/12 职场文书
美丽的大脚观后感
2015/06/03 职场文书
倡议书怎么写?
2019/04/11 职场文书
golang 如何用反射reflect操作结构体
2021/04/28 Golang