如何解决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 相关文章推荐
关于图片验证码设计的思考
Jan 29 Javascript
把html页面的部分内容保存成新的html文件的jquery代码
Nov 12 Javascript
js 小数取整的函数
May 10 Javascript
JavaScript prototype属性使用说明
May 13 Javascript
基于jquery插件实现常见的幻灯片效果
Nov 01 Javascript
jQuery layui常用方法介绍
Jul 25 Javascript
AngularJS 与百度地图的结合实例
Oct 20 Javascript
使用JS读取XML文件的方法
Nov 25 Javascript
Angular实现响应式表单
Aug 04 Javascript
vuejs实现折叠面板展开收缩动画效果
Sep 06 Javascript
页面内锚点定位及跳转方法总结(推荐)
Apr 24 Javascript
vue脚手架项目创建步骤详解
Mar 02 Vue.js
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下几种删除目录的方法总结
2007/08/19 PHP
PHP 金额数字转换成英文
2010/05/06 PHP
Ajax和PHP正则表达式验证表单及验证码
2016/09/24 PHP
PHP实现字符串翻转功能的方法【递归与循环算法】
2017/11/03 PHP
Laravel 已登陆用户再次查看登陆页面的自动跳转设置方法
2019/09/30 PHP
javascript 流畅动画实现原理
2009/09/08 Javascript
input按钮的事件处理大全
2010/12/10 Javascript
jQuery判断元素是否是隐藏的代码
2011/04/24 Javascript
JavaScript版DateAdd和DateDiff函数代码
2012/03/01 Javascript
jQuery中Nicescroll滚动条插件的用法
2016/11/10 Javascript
详解springmvc 接收json对象的两种方式
2016/12/06 Javascript
js实现漫天星星效果
2017/01/19 Javascript
单行 JS 实现移动端金钱格式的输入规则
2017/05/22 Javascript
Webpack执行命令参数详解
2017/06/17 Javascript
浅谈微信小程序flex布局基础
2018/09/10 Javascript
vue.js编译时给生成的文件增加版本号
2018/09/17 Javascript
微信小程序之裁剪图片成圆形的实现代码
2018/10/11 Javascript
微信小程序实现分享朋友圈的图片功能示例
2019/01/18 Javascript
关于AOP在JS中的实现与应用详解
2019/05/06 Javascript
vue实现一拉到底的滑动验证
2019/07/25 Javascript
微信小程序实现电子签名功能
2020/07/29 Javascript
Python列表list数组array用法实例解析
2014/10/28 Python
Python合并多个装饰器小技巧
2015/04/28 Python
python先序遍历二叉树问题
2017/11/10 Python
Django之Mode的外键自关联和引用未定义的Model方法
2018/12/15 Python
Python爬虫如何破解JS加密的Cookie
2020/11/19 Python
幼儿园中班评语大全
2014/04/17 职场文书
班主任评语大全
2014/04/26 职场文书
反邪教警示教育方案
2014/05/13 职场文书
演讲稿格式范文
2014/05/19 职场文书
员工教育培训协议书
2014/09/27 职场文书
青年教师个人总结
2015/02/11 职场文书
工会积极分子个人总结
2015/03/03 职场文书
2015年扫黄打非工作总结
2015/05/13 职场文书
2016大学先进团支部事迹材料
2016/03/01 职场文书
导游词之镜泊湖
2019/12/09 职场文书