ionic的版本有1,2,3;部分语法差异比较大,学习直接用的最新的3.2.0版本,可用
npm uninstall -g ionic
npm install -g ionic@latest
更新至最新版。
ionic3开发问题汇总
eg.1q:创建登录界面后跳转至tab界面,tab页下的push到新的界面会带下面的tab控件
a:在app.module.ts
中的imports:[]
中:修改原对应为
IonicModule.forRoot(MyApp,{
tabsHideOnSubPages: 'true' //隐藏全部子页面tabs
})
eg.2q:tab栏中如果需要点击tab中一个弹出面板或module
a:去掉[root]
,增加(ionSelect)
点击事件即可,修改tabs.html
中的ion-tab
如:
<ion-tab [root]="tab1Root" tabTitle="首页" tabIcon="home"></ion-tab>
为<ion-tab tabIcon="add" tabTitle="" (ionSelect)="presentActionSheet()"></ion-tab>
eg.3q:slides在爪机不能自动滑动
a:.ts
文件下
1.导入ViewChild ,Slides
并通过@ViewChild
匹配到组件 Slides
元素
@ViewChild(Slides) slides: Slides;
2.在ionViewDidEnte
生命周期里设置该参数autoplayDisableOnInteraction = false
ionViewDidEnter() {
this.slides.autoplayDisableOnInteraction = false;
}
eg.4q:实现水平方向的分类列表展示时的img标签的css样式实现
a:
.css
.icon-size {
max-width:80px;
max-height:80px;
width:100px;
height:100px;
border-radius:60%;
vertical-align:middle;
}
.div-size{
clear: both;
display: block;
margin:auto;
}
.ts
this.items = [ {
title: "标题1",
pic:"http://p1.qzone.la/upload/20150222/yk961fx2.jpg",
desc:"描述的尽可能好一点1",
id:"1",
}
]
.html
<div class="row">
<div class="div-size"*ngFor="let item of items" (click)="typeClick(item)">
<img class="icon-size"src={{item.pic}}>
<h2 class="ion-md-text" style="text-align:center">{{item.title}}</h2>
</div>
</div>
结果
eg.5q:filder抓包工具的请求时间查看
a:在菜单栏上点击Rules->CustomRules
在
class Handlers{
//里面添加开始
function BeginRequestTime(oS: Session)
function BeginRequestTime(oS: Session)
{
if (oS.Timers != null)
{
returnoS.Timers.ClientBeginRequest.ToString();
}
return String.Empty;
}
public staticBindUIColumn("Time Taken")
function CalcTimingCol(oS:Session){
var sResult = String.Empty;
if((oS.Timers.ServerDoneResponse > oS.Timers.ClientDoneRequest))
{
sResult = (oS.Timers.ServerDoneResponse- oS.Timers.ClientDoneRequest).ToString();
}
return sResult;
}
//里面添加结束
}
保存退出之后,在请求链接列Time Taken下即可看到请求时间
eg.6q:本地数据库存储出现的问题 Stroage引入的问题
Error: Can't resolve all parameters for Storage: (?)
NullInjectorError: No provider for Storage! ;
a:只需要在app.module.ts
下的imports
加入IonicStorageModule.forRoot()
即可解决