ionic列表模板

ionic动态列表模板

话不多说，先看效果图片

自我感觉还是不错的，你们觉得呢，这里我用到了ionic的card组件，一个动态就是一个card，说实话把，我也是直接抄的官网的栗子：传送门，我只是在这个基础上添加了一个删除，实现了点赞，评论等功能，先贴代码吧：

<ion-header>
  <ion-navbar color="primary">
    <ion-title>
      探索
    </ion-title>
  </ion-navbar>
</ion-header>
<ion-content class="content_bg">
  <ion-refresher (ionRefresh)="doRefresh($event)">
    <ion-refresher-content
      pullingIcon="arrow-dropdown"
      pullingText="下拉刷新"
      refreshingSpinner="circles"
      refreshingText="刷新中...">
    </ion-refresher-content>
  </ion-refresher>
  <div class="color_for_bg"></div>
  <ion-item (click)="uploadMes()">
    <ion-avatar item-start>
      <img src="../../assets/imgs/userPhoto.jpg">
    </ion-avatar>
    <p>说点什么吧...</p>
  </ion-item>

  <div class="color_for_bg"></div>

  <ion-card *ngFor="let new of newsList">
    <ion-item>
      <ion-avatar item-start>
        <img src="../../../img/userPhoto.jpg">
      </ion-avatar>
      <h2>{{new.nickName}}</h2>
      <p>{{new.date | date}}</p>
      <ion-icon *ngIf="user['id']===new.userId" style="font-size: 2rem" name="trash" color="primary"
                item-end (click)="showConfirm(new.id)"></ion-icon>
    </ion-item>
    <img src="{{new.imgUrl}}">
    <ion-card-content (click)="commentNew(new)">
      <p>{{new.content}}</p>
    </ion-card-content>
    <ion-row>
      <ion-col>
        <button ion-button color="primary" clear small icon-start (click)="approvel(new.id)">
          <ion-icon name='thumbs-up'></ion-icon>
          {{new.totalZan}} 赞
        </button>
      </ion-col>
      <ion-col>
        <button ion-button color="primary" clear small icon-start (click)="commentNew(new)">
          <ion-icon name='text'></ion-icon>
          {{new.totalComment}} 评论
        </button>
      </ion-col>
      <ion-col align-self-center text-center>
        <ion-note>
          {{new.time}}
        </ion-note>
      </ion-col>
    </ion-row>
  </ion-card>
</ion-content>

这就是页面布局的代码，下面贴出方法的代码（注意：只是当前页面中用到的方法，至于导包的操作就需要各位看官自己解决咯）：

ionViewDidLoad() {
    let $this = this;
    let loading = this.loadingCtrl.create({
      content: '正在加载...'
    });
    this.http.get("/api/news/list", {}, function (res, msg) {
      if (res.code === 0) {
        $this.newsList = res.data;
        loading.dismiss();
      } else {
        $this.showToast("top", res.msg);
        loading.dismiss();
      }
    }, function (msg) {
      loading.dismiss();
      $this.showToast("top", msg.message);
    })
  }
  uploadMes() {
    this.navCtrl.push(UserSendMesPage, {userId: this.user['id']})
  }

  //下拉刷型界面
  doRefresh(refresher){
    let $this = this;
    this.http.get("/api/news/list", {}, function (res, msg) {
      if (res.code === 0) {
        $this.newsList = res.data;
        refresher.complete();
        $this.showToast("bottom", "加载成功")
      }
    }, function (msg) {
      refresher.complete();
      $this.showToast("top", msg.message);
    });
  }

  // 点赞功能
  approvel(currentNewId: any) {
    let $this = this;
    this.http.get("/api/news/approvel", {userId: this.user['id'], newsId: currentNewId}, function (res, msg) {
      if (res.code === 0 && res.data) {
        $this.newsList.forEach(it => {
          if(it.id === currentNewId) {
            it.totalZan = it.totalZan + 1;
          }
        })
      } else if (res.code === 0) {
        $this.newsList.forEach(it => {
          if(it.id === currentNewId) {
            it.totalZan = it.totalZan - 1;
          }
        })
      }
    }, function (msg) {
    });
  }

  deleteNew(newId: number) {
    let $this = this;
    this.http.post("/api/news/delete", {id: newId, userId: this.user['id']}, function (res, msg) {
      if (res.code === 0) {
        $this.newsList = res.data;
      }
    }, function (msg) {
    });
  }

  commentNew(news: any){
    this.navCtrl.push(TravelNewsPage, {item: news, currentUserId: this.user['id']});
    console.log(news)
  }

  showToast(position: string, message: string) {
    let toast = this.toastCtrl.create({
      message: message,
      duration: 2000,
      position: position
    });
    toast.present(toast);
  }
  showConfirm(newId: number) {
    let confirm = this.alertCtrl.create({
      title: '温馨提示',
      message: '是否要删除该动态?',
      buttons: [
        {
          text: '再看看',
          handler: () => {
            console.log('Disagree clicked');
          }
        },
        {
          text: '是的',
          handler: () => {
            this.deleteNew(newId);
          }
        }
      ]
    });
    confirm.present();
  }

可能只看代码有点恼火，还是大致说一下吧：
第一个方法：ionViewDidLoad（），这个是ionic里面的方法，没认真研究过，欺骗下自己吧（等空了再看），这个方法作用是页面一加载就会被调用，所以我们这里是页面一加载就去请求后台，将动态列表发送给我，然后赋值给newsList变量，赋值给这个，在静态代码中是循环这个变量来进行渲染的，所以就会有很多条的动态，以及用户头像，图片，点赞量，评论数以及发布时间。
第二个方法：uploadMes（），这个方法主要就是打开新的页面发布动态
第三个方法：doRefresh（），这个方法主要是下拉刷新的方法，用户释放手势过后就会调用这个方法，我的逻辑是去重新发送到后台的请求，请求服务器返回给我最新的数据，然后赋值给newsList变量
第四个方法：approvel（），这个就是动态左下角的赞，用户点击就会调用该方法，同样需要发送请求点赞的请求到后台，我这里的逻辑是后台返回data为true或者false，如果为true说明是点赞，如果为false就是取消点赞，所以返回值里面有判断条件（res.code === 0 && res.data），其他情况视为取消点赞
第五个方法：deleteNew（），这个方法是删除这条动态的方法，如果当前动态是当前登陆用户发布的才会有删除的图标出现在页面上，否则不会出现，html代码里面有判断条件 *ngIf=“user[‘id’]===new.userId” ，删除的时候带上用户的id和要删除的动态的id，删除过后会返回最新的列表，重新赋值给newsList，就达到了刷新的效果
第六个方法：commentNew（），这个方法起到了一个跳转到另外一个页面的作用，也就是这条动态的详情页面，下一篇博客会说到。后面两个方法我就不介绍了，就是弹窗和提示语的两个方法