循环滚动
<ion-app>
<ion-header>
<ion-toolbar>
<ion-title>段子</ion-title>
</ion-toolbar>
</ion-header>
<ion-content *ngIf="duanzi">
<!-- 横向滚动 i-slides -->
<!-- 配置: https://www.swiper.com.cn/api/index.html -->
<!-- disableOnInteraction: 手动操作swiper之后, 是否要禁止自动滚动, 默认true 禁止 -->
<!-- delay: 滚动间隔 -->
<!-- loop:true 循环滚动 -->
<ion-slides
pager
[options]="{
autoplay: {
disableOnInteraction: false,
delay: 1000
},
loop: true
}"
>
<ion-slide *ngFor="let item of duanzi.result">
<ion-card>
<img [src]="item.images" alt="" />
</ion-card>
</ion-slide>
</ion-slides>
</ion-content>
</ion-app>
ts文件部分代码如下图所示:
export class AppComponent {
ngOnInit(): void {
this.getDuanZi();
}
doRefresh(event) {
let url = "https://api.apiopen.top/getJoke?type=gif&page=1";
this.http.get(url).subscribe((res: DuanZi) => {
this.duanzi = res;
event.target.complete(); //结束刷新状态
this.page = 1; //当前页变为初始的 1
});
}
page = 1; //当前页
loadData(event) {
let nextP = this.page + 1;
let url = "https://api.apiopen.top/getJoke?type=gif&page=" + nextP;
this.http.get(url).subscribe((res: DuanZi) => {
// 合并新数据 到 旧数据中
this.duanzi.result = this.duanzi.result.concat(res.result);
this.page = nextP; //页数更新为当前页
event.target.complete(); //结束本次加载更多
});
}
duanzi: DuanZi;
getDuanZi() {
let url = "https://api.apiopen.top/getJoke?type=gif&page=1";
this.http.get(url).subscribe((res: DuanZi) => {
console.log(res);
this.duanzi = res;
});
}
constructor(
private platform: Platform,
private splashScreen: SplashScreen,
private statusBar: StatusBar,
private http: HttpClient
) {
this.initializeApp();
}
initializeApp() {
this.platform.ready().then(() => {
this.statusBar.styleDefault();
this.splashScreen.hide();
});
}
}
/
返回值类型 /
//因为在TS中需要指明某些对象的类型,这样既可以做到静态资源分析,
//也可以指定接收对象的类型(不明白的可以学习下TypeScript 特性)
interface DuanZi {
code: number;
message: string;
result: DuanZiData[];
}
interface DuanZiData {
comment: string;
down: string;
forward: string;
header: string;
images: string;
name: string;
passtime: string;
sid: string;
text: string;
thumbnail: string;
top_comments_content: string;
top_comments_header: string;
top_comments_name: string;
top_comments_uid: string;
top_comments_voiceuri: string;
type: string;
uid: string;
up: string;
video: string;
}
其中,app.module.ts文件中需要引入HttpClientModule,即可实现如下效果图:
这篇文章对你有帮助吗?作为一名程序猿,在评论区留下你的困惑或你的见解,大家一起来交流吧!