ionic3项目实战教程四(创建自定义directive、带参directive、下拉刷新ion-refresher、上拉加载ion-infinite-scroll)

本文是Ionic3项目的实战教程,详细讲解了如何创建自定义指令,包括带参数的指令,并实现了下拉刷新(ion-refresher)和上拉加载(ion-infinite-scroll)功能,提供了丰富的示例代码和效果展示。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

前言

  • 看到一种说法,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>查看详情</
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值