Ionic 做一个简单的项目(在系统的基础上)Mac(附上代码实现)

功能说明:底部多一个新闻页面,新闻标签是一个列表,点击列表跳入详情页面,二级跳转取消底部的TabBar,可以修改导航栏back 内容.

1. 创建项目:

1.1 用终端CD想要创建项目的文件,然后输入:npm install -g cordova ionic  

1.2. 然后输入 ionic start myApp(自己创建的项目) tabs  

1.3. cd  myApp(自己创建的项目) 输入:ionic serve 查看项目是否运行成功

2. 创建:

2.1  在终端输入:ionic g page news  //创建新闻页

2.2.  添加模块,所以要在APP.module.ts  导入模块    

import { NewsPage }
from '../pages/news/news';
// 导入新闻界面/模块

声明模块和进入模块 加入 Newspage

2.3. 在/Users/xuyoujin/Desktop/dream/start/myApp_gai/src/pages/tabs 中.html文件 如下添加代码

<ion-tab [root]="tab4Root"
tabTitle="新闻"
tabIcon="logo-designernews"></ion-tab>
.ts文件  添加如下代码

tab4Root = NewsPage;

由于要引用 newsPage 所以要导入NewsPage 模块

import { NewsPage }
from '../news/news';

完成了添加  底部多一个新闻页面

3. 添加新闻详情页:

3.1  在终端输入:ionic g page newinfo  //创建新闻页

3.2.  添加模块,所以要在APP.module.ts  导入模块    

import { NewinfoPage }
from '../pages/newinfo/newinfo';
// 导入新闻界面/模块

声明模块和进入模块  加入

NewinfoPage

3.3. 由于在NewsPage要用到newinfo 所以       在/Users/xuyoujin/Desktop/dream/start/myApp_gai/src/pages/news/news.module.ts 导入模块

import { NewinfoPage }
from '../newinfo/newinfo'

3.4 在NewsPage /Users/xuyoujin/Desktop/dream/start/myApp_gai/src/pages/news/news.ts 中设置列表 在NewsPage中添加 列表 list,在ViewDidLoad中加载模拟数据

export class
NewsPage {
public list = [];
constructor(public
navCtrl: NavController,
public navParams:
NavParams) {
}

ionViewDidLoad() {
console.log('ionViewDidLoad NewsPage');
for(var
i = 0;i <
100;i++)
4000
{
this.list.push('这是第'+i+'条新闻');
}

}

3.5展示数据 在/Users/xuyoujin/Desktop/dream/start/myApp_gai/src/pages/news/news.html 中展示数据

<button
ion-item *ngFor="let item of list" (click)="pushNewsinfo()">
{{ item }}
</button>

</ion-list>

由于添加点击方法,故要在new.ts中实现函数

// 注意函数要独立写,不能写在viewDidLoad内部
pushNewsinfo() {
this.navCtrl.push(NewinfoPage);
}

完成 新闻页面点击 cell 跳转进入 新闻详情页面

4.修改点击列表跳入详情页面,二级跳转取消底部的TabBar,可以修改导航栏back 内容.

4.1  /Users/xuyoujin/Desktop/dream/start/myApp_gai/src/app/app.module.ts

imports: [
BrowserModule,
// IonicModule.forRoot(MyApp)
// 这里设置二级不显示tab,还有修改导航栏返回的名字
IonicModule.forRoot(MyApp,{
tabsHideOnSubPages:
'true', //隐藏全部子页面 tabs
backButtonText:
'返回' /*配置返回按钮*/
})

],

结论: 刚开始接触Ionic 碰到很多问题,希望大家一起讨论.很多东西不是很懂,请大家多多交流.