1. 云栖社区>
  2. >
  3. 正文

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

作者:用户 来源:互联网 时间:2016-09-06 14:36:31

ionic底部遮住ionic底部滚动

如何解决IONIC页面底部被遮住无法向上滚动问题_javascript技巧 - 摘要: 本文讲的是如何解决IONIC页面底部被遮住无法向上滚动问题_javascript技巧, Ionic 是目前最有潜力的一款 HTML5 手机应用开发框架。通过 SASS 构建应用程序,它 提供了很多 UI 组件来帮助开发者开发强大的应用。 它使用 JavaScript MVVM 框架和 AngularJS 来增强应用。提供数据

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页面底部被遮住无法向上滚动问题的解决方案,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对云栖社区网站的支持!

以上是云栖社区小编为您精心准备的的内容,在云栖社区的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索ionic , 底部遮住 ionic底部滚动 ionic 滚动到底部、ionic 自动滚动到底部、javascript滚动到底部、ionic 键盘遮住输入框、ionic底部导航栏,以便于您获取更多的相关知识。