如何解决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使用动态渲染表单功能完成ajax文件下载
Jan 15 Javascript
javascript自启动函数的问题探讨
Oct 05 Javascript
js实现的GridView即表头固定表体有滚动条且可滚动
Feb 19 Javascript
jQuery判断浏览器并动态调整select宽度的方法
Mar 02 Javascript
使用jQuery实现Web页面换肤功能的要点解析
May 12 Javascript
总结JavaScript设计模式编程中的享元模式使用
May 21 Javascript
AngularJS的依赖注入实例分析(使用module和injector)
Jan 19 Javascript
JavaScript字符串_动力节点Java学院整理
Jun 27 Javascript
小程序使用watch监听数据变化的方法详解
Sep 20 Javascript
Angular之jwt令牌身份验证的实现
Feb 14 Javascript
JavaScript设计模式---单例模式详解【四种基本形式】
May 16 Javascript
vue项目配置同一局域网可使用ip访问的操作
Oct 23 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
PHP 批量更新网页内容实现代码
2010/01/05 PHP
php中限制ip段访问、禁止ip提交表单的代码分享
2014/08/22 PHP
PHP substr()函数参数解释及用法讲解
2017/11/23 PHP
php进程(线程)通信基础之System V共享内存简单实例分析
2019/11/09 PHP
PHPstorm激活码2020年5月13日亲测有效
2020/09/17 PHP
js日期、星座的级联显示代码
2014/01/23 Javascript
Javascript获取统一管理的提示语(message)
2016/02/03 Javascript
浅析javascript异步执行函数导致的变量变化问题解决思路
2016/05/13 Javascript
详解Vue使用 vue-cli 搭建项目
2017/04/20 Javascript
详解nodejs微信jssdk后端接口
2017/05/25 NodeJs
微信小程序实现根据字母选择城市功能
2017/08/16 Javascript
原生JS+CSS实现炫酷重力模拟弹跳系统的登录页面
2017/11/01 Javascript
一种angular的方法级的缓存注解(装饰器)
2018/03/13 Javascript
js合并两个数组生成合并后的key:value数组
2018/05/09 Javascript
微信小程序实现图片滚动效果示例
2018/12/05 Javascript
JS PHP字符串截取函数实现原理解析
2020/08/29 Javascript
在Python中使用M2Crypto模块实现AES加密的教程
2015/04/08 Python
Centos7 Python3下安装scrapy的详细步骤
2018/03/15 Python
Python redis操作实例分析【连接、管道、发布和订阅等】
2019/05/16 Python
wxpython绘制音频效果
2019/11/18 Python
python模拟斗地主发牌
2020/04/22 Python
python实现读取类别频数数据画水平条形图案例
2020/04/24 Python
python中_del_还原数据的方法
2020/12/09 Python
matplotlib 画动态图以及plt.ion()和plt.ioff()的使用详解
2021/01/05 Python
计算机专业应届毕业生自荐信
2013/09/26 职场文书
事假请假条范文
2014/04/11 职场文书
《孔繁森》教学反思
2014/04/17 职场文书
会计演讲稿范文
2014/05/23 职场文书
企业公益活动策划方案
2014/08/24 职场文书
公民代理授权委托书
2014/09/24 职场文书
骨干教师事迹材料
2014/12/17 职场文书
2015年禁毒宣传活动总结
2015/03/25 职场文书
如何起草一份正确的合伙创业协议书?
2019/07/04 职场文书
导游词之贵州织金洞
2019/10/12 职场文书
Promise面试题详解之控制并发
2021/05/14 面试题
python自动化测试之Selenium详解
2022/03/13 Python