博客

前言

• 看到一种说法，angular是一个框架，而react和vue只是一个库而已。虽然不敢苟同，但深入学习之后感觉angular确实相当牛皮。

一、创建directive，带参directive

1.ionic g directive noDblClick //创建一个名为noDblClick的自定义指令

2.修改home.html和no-dbl-click.ts丰富功能

//home.html
<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <h2>{{msg}}</h2>
  <button ion-button class="btn-login" color="secondary" *ngIf="!isLogin" (click)="goLoginPage()">去登录页面</button>
  <button ion-button class="btn-login" *ngIf="isLogin" (click)="logout()">退出登录</button>
  <button ion-button no-dbl-click>测试指令不带参数</button>
  <button ion-button no-dbl-click="green">测试指令</button>
  <ion-list>
    <ion-item *ngFor="let item of list">
      <ion-avatar item-left>
        <img [src]="item?.url">
      </ion-avatar>
      <h2>{{item?.title}}</h2>
      <p>{{item?.url}}</p>
      <button ion-button clear item-right>查看详情</button>
    </ion-item>
  </ion-list>
</ion-content>

//no-dbl-click.ts
import { Directive, ElementRef, HostListener,Input } from '@angular/core';

@Directive({selector: '[no-dbl-click]'})
export class NoDblClickDirective {

  //可选传参highlightColor
  @Input('no-dbl-click') highlightColor: string;
  public defaultColor='pink';//默认背景颜色

  constructor(public el: ElementRef) {
    //实现设置默认背景色
    this.el.nativeElement.style.backgroundColor=this.defaultColor;
  }
  //监听注解写在某个方法上面，表示下面的方法是该事件处理函数
  //实现不能重复点击该按钮(设置disabled属性为true,3秒后改为false)
  @HostListener('click')
  click() {
    console.log('点击一次了，3秒后才可以再次点击');
    this.el.nativeElement.disabled = true;
    setTimeout(() => {
      this.el.nativeElement.disabled = false;
    }, 3000)
  }
  //手指按下去的时候触发该监听事件，设置背景色
  @HostListener('touchstart')
  onTouchStart() {
    this.highlight(this.highlightColor || this.defaultColor || 'red');
  }
  //手指离开的时候触发该监听事件，取消背景色
  @HostListener('touchend')
  onTouchsEnd() {
    this.highlight(null);
  }

  private highlight(color: string) {
    this.el.nativeElement.style.backgroundColor = color;
  }
}

3.全局引入指令或某个页面引入指令, 建议全局引入，所有页面都可以直接用简单省事

//app.module.ts
import { DirectivesModule } from "../directives/directives.module";
imports:[
    ...,
    DirectivesModule
]

默认页面如图：



点击带参数（green）按钮：



点击带参数（green）按钮松开后：



点击不带参数按钮：



点击不带参数按钮松开后：

下拉刷新、上拉加载

1.修改contact.html和contact.ts页面

//contact.html
<ion-header>
  <ion-navbar>
    <ion-title>
      Contact
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <!-- 下拉刷新 -->
  <ion-refresher (ionRefresh)="init($event)">
    <ion-refresher-content pullingIcon="arrow-dropdown"
                           pullingText="下拉刷新"
                           refreshingSpinner="circles"
                           refreshingText="刷新中..."></ion-refresher-content>
  </ion-refresher>
  <!-- 列表 -->
  <ion-list>
    <ion-item-sliding *ngFor="let item of classList">
      <ion-item>
        <ion-thumbnail item-start>
          <img [src]="item?.src">
        </ion-thumbnail>
        <h2>{{item?.name}}</h2>
        <p>{{item?.describe}}</p>
      </ion-item>
      <ion-item-options side="left">
        <button ion-button color="primary">
          <ion-icon name="text"></ion-icon>
          Text
        </button>
        <button ion-button color="secondary">
          <ion-icon name="call"></ion-icon>
          Call
        </button>
      </ion-item-options>
      <ion-item-options side="right">
        <button ion-button color="danger">
          <ion-icon name="mail"></ion-icon>
          Email
        </button>
      </ion-item-options>
    </ion-item-sliding>
  </ion-list>
  <!-- 上拉加载 -->
  <ion-infinite-scroll (ionInfinite)="doInfinite($event)"
                       [enabled]="enabled"
                       threshold="100px">
    <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="加载更多"></ion-infinite-scroll-content>
  </ion-infinite-scroll>
</ion-content>

//contact.ts
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { ApiProvider } from "../../providers/api/api";

//定义学生格式接口
interface Student {
  id: number;
  name:string;
  describe:string;
  src:string;
}
@Component({
  selector: 'page-contact',
  templateUrl: 'contact.html'
})
export class ContactPage {

  public pageNum:number;//当前请求第几页
  public enabled:boolean;//能否上拉加载
  public classList:Array<Student>=[];

  constructor(
    public navCtrl: NavController,
    public api:ApiProvider
  ) {
    this.init(null);
  }
  public init(refresher){
    //初始化或下拉刷新时设置默认值
    this.pageNum=0;
    this.enabled=true;
    this.api.getClassList(this.pageNum).then(data=>{
      this.classList=data['list'];
      //触发下拉刷新完成事件
      refresher && refresher.complete();
      //如果已经是最后一页，则禁止上拉加载
      if(this.pageNum==data['pageSize']){
        this.enabled=false;
      }
    },err=>{
      console.dir(err);
      refresher && refresher.cancel();
    })
  }
  public doInfinite(infiniteScroll){
    this.pageNum++;
    this.api.getClassList(this.pageNum).then((data)=>{
      //新数据拼接到后面
      this.classList=[...this.classList,...data['list']];
      infiniteScroll.complete();
      //如果已经是最后一页，则禁止上拉加载
      if(this.pageNum==data['pageSize']){
        this.enabled=false;
      }
    },err=>{
      console.dir(err);
      this.pageNum--;
      infiniteScroll.complete();
    });
  }
}

  //api.ts 中增加方法
  //获取classList列表，假装从后台获取的分页数据
  public getClassList(pageNum){
    return new Promise((resolve, reject) => {
      let res={//假设分页接口返回的数据
        pageNum:pageNum,
        pageSize:3,
        list:[]
      };
      if(pageNum<3){//假装有三页数据
        setTimeout(()=>{//模仿后台请求事件500ms
          for(let i=1;i<11;i++){
            let count=pageNum*10+i;//当前是第几项
            res.list.push({
              id:count,
              name:`第${count}项`,
              describe:`第${count}项的描述`,
              src:'assets/imgs/a5.jpg'
            });
          }
          resolve(res)
        },500)
      }else{
        setTimeout(()=>{//模仿后台请求事件500ms
          resolve(res)
        },500)
      }
    });
  }

效果如图示：



下拉刷新：



上拉加载：



2.参考链接

–

下拉刷新 官网文档


–

上拉加载 官网文档

ps:有什么写的不对的地方欢迎指正，写了好久呢，小哥哥小姐姐点个赞吧=_=!