【ionic框架bug】slideBox在使用model或pop后width变为0的解决方案
2019独角兽企业重金招聘Python工程师标准>>>
重新排版后的文章链接:https://my.oschina.net/keysITer/blog/749208
在项目中的日历使用的是silideBox,但是最近在测试的时候发现一个框架BUG:
问题描述:
如果在silideBox上使用缓存,那么在进入另一个state之后,打开一个Popover或者一个Modal,再返回原来的页面,则slideBox的width变为0,即看不见silideBox的内容了。
解决方案:
1.使用ng-if
即不使用缓存,但是这样的弊端就是没有缓存-.-。
2.使用$ionicSlideBoxDelegate.update()
在每次进入页面的时候执行此方法,会让slideBox重新计算宽度和高度。判断进入页面的方法可以是监听$ionicView.enter或者$stateChangeSuccess,建议后者,其中封装的有stateFrom、stateTo等方法方便判断页面的跳转,并且反应较前者快很多。
3.修改ionic源码(建议)
为什么说这个是ionic的框架bug,就是因为它的源码写的有缺陷,导致一些莫名其妙的问题。所以打开ionic.bundle.js查看它的源码(只展示一开始的一部分):
ionic.views.Slider=ionic.views.View.inherit({
initialize:function(options){
varslider=this;
//utilities
varnoop=function(){};//simplenooperationfunction
varoffloadFn=function(fn){setTimeout(fn||noop,0);};//offloadafunctionsexecution
//checkbrowsercapabilities
varbrowser={
addEventListener:!!window.addEventListener,
touch:('ontouchstart'inwindow)||window.DocumentTouch&&documentinstanceofDocumentTouch,
transitions:(function(temp){
varprops=['transitionProperty','WebkitTransition','MozTransition','OTransition','msTransition'];
for(var i in props)if(temp.style[props[i]]!==undefined)returntrue;
return false;
})(document.createElement('swipe'))
};
var container=options.el;
//quitifnorootelement
if(!container)return;
var element=container.children[0];
var slides,slidePos,width,length;
options=options||{};
var index=parseInt(options.startSlide,10)||0;
var speed=options.speed||300;
options.continuous=options.continuous!==undefined?options.continuous:true;
function setup(){
//此为添加的代码
console.log('setup')
if(!container.offsetWidth){ return;
}
//此为添加的代码end
//cacheslides
slides=element.children;
length=slides.length;
阅读源代码后可以发现,setup方法是slidebox的主方法,所以我在setup的方法里面加了一个打印语句,看他在什么时间会执行这个方法。
测试期间,发现每当popover或者modal打开的时候,这个方法都会执行两次(原因不明),代码中:container返回的是整个slider的HTML代码片段,当他在页面中可见的时候,它的可见宽度大于0,反之为0,所以在我们跳转至其他页面的时候,它的可见宽度即变为0,这个时候我们只要阻止它改变当前的状态即可,所以加上return,这样问题就解决啦。
4.直接引入新的js,覆盖原来的
转载于:https://my.oschina.net/keysITer/blog/659014
【ionic框架bug】slideBox在使用model或pop后width变为0的解决方案相关推荐
- keras系列︱Application中五款已训练模型、VGG16框架(Sequential式、Model式)解读(二)...
引自:http://blog.csdn.net/sinat_26917383/article/details/72859145 中文文档:http://keras-cn.readthedocs.io/ ...
- keras系列︱Application中五款已训练模型、VGG16框架(Sequential式、Model式)解读(二)
不得不说,这深度学习框架更新太快了尤其到了Keras2.0版本,快到Keras中文版好多都是错的,快到官方文档也有旧的没更新,前路坑太多. 到发文为止,已经有theano/tensorflow/CNT ...
- 从.Net框架Bug的提交到修复代码成功合并到.NET CoreFX主线
从发现.NET Framework中SmtpClient的Bug并拿出解决方案,然后给微软开发者社区提交Bug开始,总共耗时一个多月,对Bug修复的代码最终被采纳,现已合并到.NET Core Lib ...
- Ionic 框架宣布 2019 年将正式支持 Vue 和 React
Ionic 框架开发团队近日宣布,2019年将推出正式支持 Vue (目前处于 alpha 阶段)和 React 的 Ionic 版本,以让开发者在框架选择上更多样化. Ionic 是一个高级的 HT ...
- php7 viewmodel,【初念科技】| php框架实例: Laravel之Model Observer模型
原标题:[初念科技]| php框架实例: Laravel之Model Observer模型 本文主要学习下Laravel的Model Observer模型观察者,小编把自己的一点点经验分享出来希望对别 ...
- ionic框架中TABS中tabs-striped条形切换问题
昨天在写案例中,发现ionic框架中tabs-striped无法随鼠标点击而改变class中的active,思考了一下,我在相对应的路由中的controller添加了一句话:$scope.*_acti ...
- ionic框架环境配置
参考文章 Cordova 3.x 基础(1) -- 环境搭建(Windows / Android) http://rensanning.iteye.com/blog/2016364 phoneGap之 ...
- 关于使用scrapy框架编写爬虫以及Ajax动态加载问题、反爬问题解决方案
关于使用scrapy框架编写爬虫以及Ajax动态加载问题.反爬问题解决方案 参考文章: (1)关于使用scrapy框架编写爬虫以及Ajax动态加载问题.反爬问题解决方案 (2)https://www. ...
- LayUi前端框架删除数据缓存问题(解决删除后刷新页面内容又会显示问题)
LayUi前端框架删除数据缓存问题(解决删除后刷新页面内容又会显示问题) 参考文章: (1)LayUi前端框架删除数据缓存问题(解决删除后刷新页面内容又会显示问题) (2)https://www.cn ...
- ECharts 饼图切换数据源bug 开始没数据显示 切换或刷新后显示
1.出现问题原因 一个饼图,右上方两个按钮分别为今天和本月,分别调用不同接口控制,点击则调用不同接口同时饼图绑定数据源刷新:出现此问题原因点击今日按钮有一个饼图区域形没有数据不显示,对应数据值比例都没 ...
最新文章
- 大规模知识图谱的构建
- OpenSSL“心脏出血”漏洞
- ios retain 与 copy 的区别
- SAP智能机器人流程自动化解决方案
- SAP Netweaver gateway framework序列化
- mysql数据库 常用函数_《MySQL数据库》常用函数整理
- asp.net 得到上一页地址
- Web框架——Flask系列之自定义过滤器详解(五)
- Java笔记-RestTemplate(Java进程)配置代理Fiddler抓包
- JQuery选择器及radio,checkbox,select取值和反选
- dede自定义表单html,织梦自定义表单制作在线订单详细解说
- 贺利坚老师汇编课程52笔记:汇编语言模块化程序设计
- 【搜狗拼音输入法 3.2 论坛版】
- CSS学习笔记:transition
- HTC手机手动解锁教程
- 大咖说|翼辉丁晓华:我们已经真正意义上感受到了原始创新带来的巨大价值
- 美萍足浴远程共享狗使用方法
- Java 9 : 从零开始实现模块化(一)
- 反常识—股票暴跌收益会更高
- 小型元器件介绍:排阻
热门文章
- 芝麻信用分怎么提高到750+芝麻信用分暴涨攻略
- 【延展Extension的基本使用 Objective-C语言】
- 全球高效能人士给青年的50个忠告(上)
- 汉字编码,GB2312、GB 13000、GBK、GB18030 介绍
- linux怎样安装麒麟双系统,win10系统装麒麟系统双系统的具体办法
- shell提示Algorithm negotiation fail
- 数据库使用SHADOW系统实现高可用性
- 向量叉积和点积混合运算_叉乘点乘混合运算公式
- NLP(自然语言处理)基本入门之分词操作
- 【AI视野·今日CV 计算机视觉论文速览 第187期 part1】Fri, 18 Dec 2020