9 上拉下拉

9.1 上拉scroll

首先写一个列表
再写一个下拉的画面

  • threshold 距离底部多少处罚方法
  • (ionInfinite) 监听方法
  • loadingSpinner 下拉的图标
  • loadingText 下拉的文字
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <ion-list>
        <ion-item *ngFor="let item of data">
          {{item}}
        </ion-item>
      </ion-list>
      <ion-infinite-scroll threshold="100px" (ionInfinite)="loadData($event)">
          <ion-infinite-scroll-content
                  loadingSpinner="bubbles"
                  loadingText="Loading more data...">
          </ion-infinite-scroll-content>
      </ion-infinite-scroll>

引入下拉组件

1
import { IonInfiniteScroll } from '@ionic/angular';

初始化数据

1
2
3
4
5
6
public data: any[] = [];
    constructor() {
        for (const i = 0; i < 20; i ++) {
            this.data.push(`这是第${i}条数据`);
        }
    }

下拉事件

1
2
3
4
5
6
7
8
9
loadData(event) {
        setTimeout(() => {
            for (const i = 0 ; i < 10; i ++) {
                this.data.push(`这是第${i}条数据`);
            }
            console.log('Done');
            event.target.complete();
        }, 500);
    }

这里有BUG，第一次可以下拉，第二次不行

所以必须调用
event.target.complete();
所以在html中需要这样调
(ionInfinite)="loadData($event)"

9.2 关闭上拉

event.target.disabled = true;

1. 下拉到极限关闭下拉
需要在下拉事件中添加判断

1
2
3
4
5
6
7
8
9
10
11
12
13
loadData(event) {
        setTimeout(() => {
            for (const i = 0 ; i < 10; i ++) {
                this.data.push(`这是第${i}条数据`);
            }
            console.log('Done');
            event.target.complete();
            // 当大于1000条时关闭下拉
            if (this.data.length === 1000) {
                event.target.disabled = true;
            }
        }, 500);
    }

2. 按钮关闭下拉
首先我们定义一个按钮

1
<ion-button (click)="toggleInfiniteScroll()">关闭下拉</ion-button>

为了获取到下拉，我们需要下拉的id

1
2
3
4
5
6
<ion-infinite-scroll #myInfiniteScroll threshold="100px" (ionInfinite)="loadData($event)">
    <ion-infinite-scroll-content
            loadingSpinner="bubbles"
            loadingText="Loading more data...">
    </ion-infinite-scroll-content>
  </ion-infinite-scroll>

在js中引入获取id的包,并且通过id获取dom

1
2
import { Component , ViewChild } from '@angular/core';
@ViewChild('myInfiniteScroll') infiniteScroll: IonInfiniteScroll;

写点击事件

1
2
3
4
// 关闭就打开，打开就关闭
toggleInfiniteScroll() {
        this.infiniteScroll.disabled = !this.infiniteScroll.disabled;
    }

9.3 请求后台数据

1. 首先在app.module.ts 中引入并加载数据请求模块

1
2
3
4
5
6
7
8
9
10
11
12
13
import {HttpClientModule} from '@angular/common/http';

@NgModule({
  declarations: [AppComponent], // 声明组件
  entryComponents: [], // 配置不会再模板中使用的组件
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, HttpClientModule], // 配置项目所需要的模块
  providers: [ // 配置项目所需要的服务
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent] // 项目启动的组件
})

2. 创建一个请求服务

ionic g service services/httpservice

3. 在服务中引用并注入

1
2
3
4
5
6
7
8
9
import { Injectable } from '@angular/core';
import {HttpClient} from '@angular/common/http';
@Injectable({
  providedIn: 'root'
})
export class HttpserviceService {

    constructor(public http: HttpClient) { }
}

4. 封装get方法

1
2
3
4
5
6
7
8
9
get(api) {
      return  new Promise((resovel, err) => {
          this.http.get(api).subscribe((response) => {
              resovel(response);
          }, (error) => {
              err(error);
          });
      });
    }

5. 在根模块中注入服务

在app.module.ts 中引入并加载数刚才创建的服务

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import {HttpserviceService} from './services/httpservice.service';

@NgModule({
  declarations: [AppComponent], // 声明组件
  entryComponents: [], // 配置不会再模板中使用的组件
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, HttpClientModule], // 配置项目所需要的模块
  providers: [ // 配置项目所需要的服务
    StatusBar,
    SplashScreen,
    HttpserviceService,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent] // 项目启动的组件
})

6. 应用
在需要的地方引入服务并注入
之后写一个请求方法如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import { Component, OnInit } from '@angular/core';
import {HttpserviceService} from '../services/httpservice.service';
@Component({
  selector: 'app-tab4',
  templateUrl: './tab4.page.html',
  styleUrls: ['./tab4.page.scss'],
})
export class Tab4Page implements OnInit {

  constructor(public httpserviceService: HttpserviceService) { }

  ngOnInit() {
    this.getData();
  }
  getData() {
    const api = 'http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1';
    this.httpserviceService.get(api).then((response) => {
      console.log(response);
    });
  }

}

9.4 上拉请求更多

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<ion-content>
  <ion-list>
    <ion-item *ngFor="let item of list">
      {{item.title}}
    </ion-item>
  </ion-list>
  <p *ngIf="hasmore">---------我也是有底线的---------</p>
  <ion-infinite-scroll threshold="10%" (ionInfinite)="loadData($event)">
    <ion-infinite-scroll-content
            loadingSpinner="bubbles"
            loadingText="Loading more data...">
    </ion-infinite-scroll-content>
  </ion-infinite-scroll>
</ion-content>

js逻辑

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
import { Component, OnInit, NgZone  } from '@angular/core'; // 这里还需要引入强制刷新
import {HttpserviceService} from '../services/httpservice.service';
@Component({
  selector: 'app-tab4',
  templateUrl: './tab4.page.html',
  styleUrls: ['./tab4.page.scss'],
})
export class Tab4Page implements OnInit {
  public list: any[] = []; // 展现列表
  public page: any = 1; // 页面计数
  public hasmore: any = true; // 底部提示
  constructor(public httpserviceService: HttpserviceService) {
    this.getData(); // 初始化的时候就请求数据
  }

  ngOnInit() {}
  getData(event= false) { // 判断是下拉的还是初始化的
    const api = 'http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=' + this.page;// 动态页码参数
    this.httpserviceService.get(api).then((response: any) => {
        this.ngZone.run(() => { // 强制刷新页面
          this.list = [...this.list, ...response.result]; // 拼接数据
          this.page ++; // 页面+1
          (event) ? event.target.complete() : event = false; // 判断是下拉的请求还是初始化的请求，如果是下拉则关闭下拉
          // 判断下一页是否有数据
          if (response.result.length < 20) {
              event.target.disabled = true; // 禁止再拉了
              this.hasmore = false; // 让底部的提示显示
          }
        })
    });
  }
    loadData(event) { // 下拉触发方法
        this.getData(event);
    }

}

9.5 下拉

  • ionRefresh 触发的方法
  • pullingText 下拉时候提示文字
  • pullingIcon 下来时候提示图标
  • refreshingText 下拉中的文字（手指放开后）
  • refreshingSpinner 下拉中的图标（手指放开后）
    1
    2
    3
    4
    5
    6
    7
    8
    <ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)" text="客官别急">
        <ion-refresher-content
        pullingIcon="arrow-dropdown"
        pullingText="Pull to refresh"
        refreshingSpinner="circles"
        refreshingText="Refreshing..."
        ></ion-refresher-content>
      </ion-refresher>

下拉方法

1
2
3
4
5
6
7
8
9
10
11
12
doRefresh(event) {
      setTimeout(() => {
         setTimeout(() => {
           for (let i = 10; i < 20; i++) {
             this.list.unshift({
                 title: i,
             });
           }
         })
          event.target.complete(); // 与上拉相同都需要关闭
      }, 2000);
    }

10 路由跳转

10.1 普通路由跳转

匹配的是路由中的path

1
2
3
4
5
6
7
<ion-button [routerLink]="['/pinfo']">
    跳转到详情
</ion-button>

<ion-button color="primary" routerLink="/button">
    跳转到按钮页面
</ion-button>

10.2 跳转传值

1
2
3
<ion-button color="primary" routerLink="/button" [queryParams]="{cid:cid ,aid:'1234'}">
    跳转到按钮页面
</ion-button>

在跳转页面中接收值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router'; // 引入对应模块
@Component({
  selector: 'app-button',
  templateUrl: './button.page.html',
  styleUrls: ['./button.page.scss'],
})
export class ButtonPage implements OnInit {

  constructor(public route:ActivatedRoute) { }

  ngOnInit() {
      this.route.queryParams.subscribe((data) => { // 获取传过来的值
          console.log(data);
      });
  }

}

10.3 返回上一页

正常情况下返回上一页没有问题

1
2
3
<ion-buttons slot="start">
  <ion-back-button defaultHref="/tabs/tab1" text="返回"></ion-back-button>
</ion-buttons>

如果在tab2中用这个的话会出现BUG
返回会返回到tab1
在这时候我们需要用到NavController来返回上一页

1
2
3
4
5
<ion-buttons slot="start">
      <ion-button (click)="goBack()">
        <ion-icon slot="icon-only" name="arrow-back"></ion-icon>
      </ion-button>
</ion-buttons>
1
2
3
4
5
goBack() {
    // tthis.nav.back(); 返回历史记录的上一页
    this.nav.navigateBack('/tabs/tab2'); // 跳转到指定页面
    // this.nav.navigateRoot('/tabs/tab2'); 直接回到根
  }

最后更新： 2019年04月14日 08:12

原始链接： http://linjiad.github.io/2019/04/09/ionic-03/

赏
× 请我吃糖~
打赏二维码