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

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底部导航栏,以便于您获取更多的相关知识。

时间: 2024-10-03 16:51:02

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

公共js在页面底部加载的注意事项介绍_javascript技巧

JavaScript脚本文件都放在页面底部加载,可以有效地加快页面的加载速度. 但是,php控制器一般这样写: 复制代码 代码如下: $this->load->view($HEADER); $this->load->view($MENU); $this->load->view($VIEW_SHOW, $data); $this->load->view($FOOTER); $FOOTER是个共用模版,用于加载js及css文件. $VIEW_SHOW作为主模版,

用js提交表单解决一个页面有多个提交按钮的问题_javascript技巧

用js提交表单解决一个页面有多个提交按钮的问题,主要是判断是否为提交文本,然后再执行相应的动作,比较简单. <pre class="javascript" name="code">function check(txt){ $j("form").submit(function(){ if($txt=="提交"){ this.action="doAddMessage.action?button=提交"

Ionic实现页面下拉刷新(ion-refresher)功能代码_javascript技巧

在平常做项目时下拉刷新功能非常常见,那么大家都是怎么实现的呢?下面小编给大家介绍如何使用Ionic实现页面下拉刷新(ion-refresher功能,一起看看看吧! 具体的实现请看下面的源码: HTML 代码 ion-refresher : 即为下拉刷新的图标: pulling-text="下拉刷新" 这里的问题可以随意更换,喜欢就好: on-refresh="doRefresh()" 这个便是当下拉的时候我们要执行的方法,这里便是刷新页面的数据. <body

window.location.reload()方法刷新页面弹出要再次显示该网页对话框_javascript技巧

用window.location.reload()方法刷新页面时,有时浏览期会出现一个这样的弹出框, 解决办法是: 一: document.location.href = "${base}/rwfp/rwfpcontent" 用这种方法找到页面对应的Action的位置,这样做虽然页面刷新,但是刷新后数据会从第一页开始显示,并不是停留在原来的页面. 二: $("#yhsubmit").click() 这种方法跟分页相关,#yhsubmit为 复制代码 代码如下: &l

JS实现页面跳转参数不丢失的方法_javascript技巧

本文实例讲述了JS实现页面跳转参数不丢失的方法.分享给大家供大家参考,具体如下: 需求:页面编辑后,返回列表页面,参数不丢失,能够记住页数以及筛选条件. 我坚信,不管白猫黑猫,能捉到耗子的就是好猫,当然如果能够高效的,简单的处理最好. 我的思路就是,把列表页面地址作为参数传递过去. 这里就会面临一个问题,url本身就是由多个参数组成的,这样纯粹的传递,就会出问题,参数丢失. 所以要对url进行加密. escape().encodeURI().encodeURIComponent() JavaSc

在多个页面使用同一个HTML片段《续》_javascript技巧

1. HTML页面: 复制代码 代码如下: <script type="text/javascript"> $(function() { $("#clickToInsert").click(function() { $.get("service.ashx?file=pages2_1.txt", function(data) { $("#placeholder").html(data); }, "text&

页面只能打开一次Cooike如何实现_javascript技巧

最近在做webIM,嵌入到OA系统,由于WEBIM处在独立页面,所以如果多次点击就会出现多个页面,这样在IE6下,服务器推送会认不到页面.所以有了下面的代码: 复制代码 代码如下: <script language="javascript" type="text/javascript"> window.onload = function () { if (GetCookie("IsOpen") == "") { S

解决js图片加载时出现404的问题_javascript技巧

运营网站久了之后,无法避免会出现图片404的情况,原因可能是图片文件本来就不存在或目前不存在.常见的解决方案是将404图片隐藏或者是替换为默认的图片. img标签事件属性 img标签可使用的时间属性有:onabort, onbeforeunload, onblur, onchange, onclick, oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart,

JS判断当前页面是否在微信浏览器打开的方法_javascript技巧

本文实例讲述了JS判断当前页面是否在微信浏览器打开的方法.分享给大家供大家参考,具体如下: 最近做很多HTML5的项目,很多页面会通过微信微博等SNS分享出去.在分享页面上提供公司APP的下载.但是在很多应用的浏览器中,点击下载链接无法下载应用.那么针对这些浏览器我们需要给用户提示从safari或者系统自带的浏览器打开分享页面.通过js就可以判断当前页面是在什么浏览器打开的. 以下是一段示例代码,注释中表明了通过JS如何判断是否在微信浏览器打开,是否在QQ空间浏览器,是否在新浪微博打开.当然可以