“ionic ui“之循环滚动实例(段子)

循环滚动

<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，即可实现如下效果图：

这篇文章对你有帮助吗？作为一名程序猿，在评论区留下你的困惑或你的见解，大家一起来交流吧！