如何解决IONIC页面底部被遮住无法向上滚动问题
2016-09-06 00:00
701 查看
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, 使用时候我们需要注入这个代理。
如上,代理中有一个方法叫做resize(), 就是重新计算高度的, 这个我加了一个timeout, 用于确保数据正常长渲染完后再resize。
以上所述是小编给大家介绍的IONIC页面底部被遮住无法向上滚动问题的解决方案,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
ionic 上拉菜单(ActionSheet)实例代码
Ionic如何创建APP项目
Ionic实现仿通讯录点击滑动及$ionicscrolldelegate使用分析
url重写IIRF(Ionic''s Isapi Rewrite Filter)手册
ionic在开发ios系统微信时键盘挡住输入框的解决方法(键盘弹出问题)
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页面底部被遮住无法向上滚动问题的解决方案,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
您可能感兴趣的文章:
使用JS轻松实现ionic调用键盘搜索功能(超实用)ionic 上拉菜单(ActionSheet)实例代码
Ionic如何创建APP项目
Ionic实现仿通讯录点击滑动及$ionicscrolldelegate使用分析
url重写IIRF(Ionic''s Isapi Rewrite Filter)手册
ionic在开发ios系统微信时键盘挡住输入框的解决方法(键盘弹出问题)
相关文章推荐
- 如何解决IONIC页面底部被遮住无法向上滚动问题
- IONIC页面底部被遮住,无法向上滚动问题解决方案
- 如何解决自定义404页面在IE等浏览器中无法显示问题
- 如何解决iphone手机微信浏览器中滑动到页面底部出现黑色背景盖住position:fixed的页面元素的问题?
- 解决iScroll横向滚动区域无法拉动页面的问题
- 如何让滚动条消失,且页面可以正常滚动(解决写选项卡时可能遇见的一个问题)
- 一个页面放2段图片滚动代码出现冲突的问题如何解决
- api 详情页面无法显示的问题如何解决
- 如何解决Silverlight集成到IIS无法显示页面问题
- 如何解决自定义404页面在IE等浏览器中无法显示问题
- 如何解决页面之间传输中文乱码的问题
- iTextSharp应用中关于“Cannot access a closed Stream”问题的解决办法(附带提供如何在页面中显示PDF的流)
- 用户控件包含一个搜索功能,但是在调用页面中按回车时无法直接提交这个表单,只有鼠标点击才提交,如何解决?
- 如何解决更改解决服务器IP,导致应用程序无法访问SQL SERVER的问题?
- 如何解决Remoting无法传输存储过程参数的问题
- Web程序中利用web.config解决无法输出excel页面的问题
- 如何解决远程页面抓取中的乱码问题
- 安装完vs.2005之后,重新安装iis后无法使用http方式访问asp.net工程的页面的问题的解决方法