ion content 滚动到底部会遮住一部分视图的快速解决方法


Posted in Javascript onSeptember 06, 2016

出现上面这个问题主要的原因是产品的需求要求点击隐藏或者展开二级列表,导致ion-content出现这个问题,经过多次尝试终于找到解决办法,很简单,只要在你的controller里面预先注入$ionicScrollDelegate,如下代码

app.controller('myperforController', ['$scope', '$http', '$state', '$ionicLoading', 'service', '$ionicHistory','$ionicScrollDelegate', function($scope, $http, $state, $ionicLoading, service, $ionicHistory,$ionicScrollDelegate){

注入完成之后就好办了,只要在你点击的地方通知ion-content重新计算宽度和高度即可,只需调用下面的方法即可:

$scope.onClick = function(text){
$ionicScrollDelegate.resize();//重新计算宽度和高度的方法
}

好了终于解决了,可以睡觉了!!!

Javascript 相关文章推荐
JS解析XML的实现代码
Nov 12 Javascript
Dom操作之兼容技巧分享
Sep 20 Javascript
基于jquery创建的一个图片、视频缓冲的效果样式插件
Aug 28 Javascript
JS实现程序暂停与继续功能代码解读
Oct 10 Javascript
常用jQuery选择器总结
Jul 11 Javascript
通过js获取上传的图片信息(临时保存路径,名称,大小)然后通过ajax传递给后端的方法
Oct 01 Javascript
easyui关于validatebox实现多重规则验证的方法(必看)
Apr 12 Javascript
Vue2.0基于vue-cli+webpack父子组件通信(实例讲解)
Sep 14 Javascript
详解搭建es6+devServer简单开发环境
Sep 25 Javascript
create-react-app使用antd按需加载的样式无效问题的解决
Feb 26 Javascript
node express使用HTML模板的方法示例
Aug 22 Javascript
小程序websocket心跳库(websocket-heartbeat-miniprogram)
Feb 23 Javascript
原生JS:Date对象全面解析
Sep 06 #Javascript
如何解决IONIC页面底部被遮住无法向上滚动问题
Sep 06 #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
You might like
解析CI的AJAX分页 另类实现方法
2013/06/27 PHP
通用javascript脚本函数库 方便开发
2009/10/13 Javascript
javascript 数组学习资料收集
2010/04/11 Javascript
使用jQuery解决IE与FireFox下createElement方法的差异
2013/11/14 Javascript
用jquery写的菜单从左往右滑动出现
2014/04/11 Javascript
Javascript玩转继承(一)
2014/05/08 Javascript
jQuery使用CSS()方法给指定元素同时设置多个样式
2015/03/26 Javascript
javascript中call和apply的用法示例分析
2015/04/02 Javascript
JS动态日期时间的获取方法
2015/09/28 Javascript
js实现文字闪烁特效的方法
2015/12/17 Javascript
Vuejs 用$emit与$on来进行兄弟组件之间的数据传输通信
2017/02/23 Javascript
jQuery实现字符串全部替换的方法【推荐】
2017/03/09 Javascript
js获取当前周、上一周、下一周日期
2017/03/19 Javascript
JS与CSS3实现图片响应鼠标移动放大效果示例
2018/05/04 Javascript
对mac下nodejs 更新到最新版本的最新方法(推荐)
2018/05/17 NodeJs
Vue-Quill-Editor富文本编辑器的使用教程
2018/09/21 Javascript
Webstorm2016使用技巧(SVN插件使用)
2018/10/29 Javascript
使用NestJS开发Node.js应用的方法
2018/12/03 Javascript
浅谈Vue中render中的h箭头函数
2019/11/07 Javascript
JS实现拖动模糊框特效
2020/08/25 Javascript
详解Vue.js 可拖放文本框组件的使用
2021/03/03 Vue.js
Python 不同对象比较大小示例探讨
2014/08/21 Python
使用Python脚本生成随机IP的简单方法
2015/07/30 Python
Python按行读取文件的简单实现方法
2016/06/22 Python
pandas数据框,统计某列数据对应的个数方法
2018/04/11 Python
CSS3简单实现照片墙
2014/12/12 HTML / CSS
几个解决兼容IE6\7\8不支持html5标签的几个方法
2013/01/07 HTML / CSS
美国女孩服装购物网站:Justice
2017/03/04 全球购物
法学专业自我鉴定
2014/02/05 职场文书
主婚人致辞精选
2015/07/28 职场文书
pytorch显存一直变大的解决方案
2021/04/08 Python
HTML+css盒子模型案例(圆,半圆等)“border-radius” 简单易上手
2021/05/10 HTML / CSS
SpringCloud Alibaba 基本开发框架搭建过程
2021/06/13 Java/Android
MybatisPlus EntityWrapper如何自定义SQL
2022/03/22 Java/Android
python文件与路径操作神器 pathlib
2022/04/01 Python
Python时间操作之pytz模块使用详解
2022/06/14 Python