ionic3开发问题1

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()即可解决