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++){

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 碰到很多问题,希望大家一起讨论.很多东西不是很懂,请大家多多交流.