Ionic—发现模块开发
程序员文章站
2022-06-01 09:30:17
...
一.发现页面布局开发
1.开发设计
-
使用
ion-refresher
组件实现页面的下拉刷新 -
完成发现页面的布局
-
开发技巧
-
开发时每次刷新都会重新到第一个页面,给tab中的html设置selectedIndex的属性值,从0开始
<ion-tabs selectedIndex="1"> <ion-tab [root]="Home" tabTitle="首页" tabIcon="home"></ion-tab> <ion-tab [root]="Discovery" tabTitle="发现" tabIcon="navigate"></ion-tab> <ion-tab [root]="Chatbubbles" tabTitle="冒泡" tabIcon="chatbubbles"></ion-tab> <ion-tab [root]="Notifications" tabTitle="提醒" tabIcon="notifications"></ion-tab> <ion-tab [root]="More" tabTitle="更多" tabIcon="more"></ion-tab> </ion-tabs>
-
2.实例代码
<ion-header>
<ion-navbar>
<ion-title>发现</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<!-- 刷新组件 -->
<ion-refresher (ionRefresh)="doRefresh($event);">
<ion-refresher-content
pullingIcon="arrow-down"
pullingText="下拉刷新"
refreshingSpinner="circles"
refreshingText="数据加载中...">
</ion-refresher-content>
</ion-refresher>
<ion-card *ngFor="let q of questions;" (click)="gotoDetails(q.id)">
<ion-item>
<ion-avatar item-start>
<img src="{{q.headFace}}"/>
</ion-avatar>
<p>
{{q.userNickName}}开启了直播间
<ion-icon class="more_button" name="more"></ion-icon>
</p>
</ion-item>
<h2>{{q.contentTitle}}</h2>
<ion-card-content>
<p>{{q.contentSummary}}</p>
</ion-card-content>
<ion-row>
<ion-col col-8 center text-left>
{{q.watched}} 观看 · {{q.love}} 爱心 · 查看房间
</ion-col>
<ion-col col-4></ion-col>
</ion-row>
</ion-card>
</ion-content>
二.发现页面逻辑开发
1.开发设计
- 主要完成发现页面的逻辑添加,主要学习下拉刷新页面的事件
- 页面
ion-refresh
组件传递的参数是refresh事件,该事件的complete()
方法可以关闭页面的刷新
2.实例代码
import { Component } from '@angular/core';
import { NavController, NavParams, ModalController, LoadingController, ToastController } from 'ionic-angular';
import { BaseUI } from '../../common/baseUI';
import { DetailsPage } from '../details/details';
@Component({
selector: 'page-discovery',
templateUrl: 'discovery.html',
})
export class DiscoveryPage extends BaseUI{
questions:any[];
errorMessage:any;
constructor(
public navCtrl: NavController,
public navParams: NavParams,
public modalCtrl: ModalController,
public loadingCtrl: LoadingController,
public toastCtrl: ToastController
){
super();
}
//进入时的事件加载
ionViewDidLoad() {
this.getQuestion();
}
//get question
getQuestion() {
let loading = this.showLoading(this.loadingCtrl,'Loading...');
setTimeout(()=>{
this.questions = [
{"id":1,"headFace":"../../assets/imgs/avatar.jpg","userNickName":"Sinar","contentTitle":"你今天很好看","contentSummary":"这里后期添加图片...","watched":100,"love":20},
{"id":2,"headFace":"../../assets/imgs/logo.png","userNickName":"Jack","contentTitle":"快进来呀小伙伴","contentSummary":"这里后期添加图片...","watched":100,"love":20},
{"id":3,"headFace":"../../assets/imgs/avatar.jpg","userNickName":"Crystal","contentTitle":"美妆真的美","contentSummary":"这里后期添加图片...","watched":100,"love":20},
{"id":4,"headFace":"../../assets/imgs/logo.png","userNickName":"Ada","contentTitle":"Free Skin完美","contentSummary":"这里后期添加图片...","watched":100,"love":20},
{"id":5,"headFace":"../../assets/imgs/avatar.jpg","userNickName":"Ida","contentTitle":"超赞美妆","contentSummary":"这里后期添加图片...","watched":100,"love":20},
{"id":6,"headFace":"../../assets/imgs/logo.png","userNickName":"Adams","contentTitle":"妆出不一样的你","contentSummary":"这里后期添加图片...","watched":100,"love":20},
{"id":7,"headFace":"../../assets/imgs/avatar.jpg","userNickName":"Lerry","contentTitle":"你今天妆了吗","contentSummary":"这里后期添加图片...","watched":100,"love":20}
]
loading.dismiss();
},500)
}
//do refresh,传递的是refresh事件
doRefresh(refresh) {
setTimeout(()=>{
this.questions = [
{"id":2,"headFace":"../../assets/imgs/logo.png","userNickName":"Jack","contentTitle":"快进来呀小伙伴","contentSummary":"这里后期添加图片...","watched":100,"love":20},
{"id":3,"headFace":"../../assets/imgs/avatar.jpg","userNickName":"Crystal","contentTitle":"美妆真的美","contentSummary":"这里后期添加图片...","watched":100,"love":20},
{"id":4,"headFace":"../../assets/imgs/logo.png","userNickName":"Ada","contentTitle":"Free Skin完美","contentSummary":"这里后期添加图片...","watched":100,"love":20},
{"id":5,"headFace":"../../assets/imgs/avatar.jpg","userNickName":"Ida","contentTitle":"超赞美妆","contentSummary":"这里后期添加图片...","watched":100,"love":20},
{"id":6,"headFace":"../../assets/imgs/logo.png","userNickName":"Adams","contentTitle":"妆出不一样的你","contentSummary":"这里后期添加图片...","watched":100,"love":20},
{"id":7,"headFace":"../../assets/imgs/avatar.jpg","userNickName":"Lerry","contentTitle":"你今天妆了吗","contentSummary":"这里后期添加图片...","watched":100,"love":20}
]
refresh.complete();//关闭刷新
},1500);
}
//跳转详情页面
gotoDetails(questionId) {
this.navCtrl.push(DetailsPage,{id:questionId});
}
}
推荐阅读