ionic3项目实战教程三（创建provider、http请求、图文列表、滑动列表）

最新推荐文章于 2024-08-30 07:55:14 发布

一袋米要扛几楼_

最新推荐文章于 2024-08-30 07:55:14 发布

阅读量4.6k

点赞数 3

分类专栏： cordova angular4 ionic3 typescript2 ecmascript6.0 文章标签： ionic3 angular4 webapp 实战教程

本文链接：https://blog.csdn.net/lyt_angularjs/article/details/81145468

版权

本文是Ionic3项目实战教程的第三部分，详细介绍了如何创建Provider进行数据存储，实现HTTP请求获取数据并展示为图文列表，以及如何构建可滑动的列表。通过创建storage Provider、调用API服务以及处理滑动效果，帮助开发者掌握Ionic3应用开发中的关键技巧。

摘要由CSDN通过智能技术生成

前言：
- 从别人的博客中获取知识，将知识写成博客留与后来人。
- 写博客既是对知识的总结梳理，也方便以后需要用的时候随时来查看。

一、创建provider

1.ionic g provider storage 创建了一个名为storage的服务在src/providers里；会自动添加到app.module.ts中。
2.先来丰富一下这个服务吧

//storage.ts
import { Injectable } from '@angular/core';

@Injectable()
export class StorageProvider {

  constructor() {
    console.log('Hello StorageProvider Provider');
  }
  public setItem(key,value){
    localStorage.setItem(key,JSON.stringify(value))
  }
  public getItem(key){
    return JSON.parse(localStorage.getItem(key))
  }
  public removeItem(key){
    localStorage.removeItem(key)
  }
}

3.接下来开始使用了

//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>
</ion-content>

//html.ts
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { LoginPage } from "../login/login";//引入页面
import { StorageProvider } from "../../providers/storage/storage";//引入服务

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  msg:string;//提示信息
  isLogin:boolean=false;//是否登录
  constructor(
    public navCtrl: NavController,
    public storage:StorageProvider,
  ) {
    this.init();
  }
  init(){
    //判断是否登录
    this.isLogin=this.storage.getItem('isLogin');
    let account=this.storage.getItem('account');
    if(account){
      this.msg=`欢迎你，${account}`;
    }else{
      this.msg=`还没登录呢，大兄弟。`;
    }
  }
  goLoginPage(){
    this.navCtrl.push(LoginPage);//路由跳转-前进
  }
  logout(){
    //删除localStorage里面的登录信息
    this.storage.removeItem('isLogin');
    this.storage.removeItem('account');
    this.init();
  }
}

//login.ts
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from