list-news.uvue

<template>
  <list-view style="flex: 1;" refresher-enabled=true @refresherrefresh="onRefresherrefresh"
    :refresher-triggered="refresherTriggered">
    <list-item class="banner" @click="bannerClick(banner)">
      <image class="banner-img" :src="banner.cover"></image>
      <text class="banner-title">{{ banner.title }}</text>
    </list-item>
    <sticky-header>
      <view style="width: 100%;height:44px;background-color: #f5f5f5;flex-direction: row;justify-content:center;align-items:center;">
        <button style="height: 40px;font-size: 13px;" v-for="(name,index) in th_item" @click="clickTH(index)">
          {{name}}
        </button>
      </view>
    </sticky-header>
    <list-item v-for="(value, index) in listData" :key="index">
      <view class="uni-list-cell" hover-class="uni-list-cell-hover" @click="goDetail(value)">
        <view class="uni-media-list">
          <image class="uni-media-list-logo" :src="value.cover"></image>
          <view class="uni-media-list-body">
            <text class="uni-media-list-text-top">{{ value.title }}</text>
            <view class="uni-media-list-text-bottom">
              <text class="uni-media-list-text">{{ value.author_name }}</text>
              <text class="uni-media-list-text">{{ value.published_at }}</text>
            </view>
          </view>
        </view>
      </view>
    </list-item>
  </list-view>
</template>

<script>
  type Banner = {
    cover : string | null,
    title : string | null,
    post_id : string | null
  }
  type Item = {
    author_name : string,
    cover : string,
    id : number,
    post_id : string,
    published_at : string,
    title : string
  }

  export default {
    data() {
      return {
        th_item: ["排序", "筛选"],
        refresherTriggered: false,
        banner: {} as Banner,
        listData: [] as Item[],
        last_id: '',
        pageVisible: false
      };
    },
    onLoad() {
      this.pageVisible = true; //设这个变量是为了避免联网结束后页面已经关闭，此时还继续执行回调逻辑的问题。不是必须的
      this.getBanner();
      this.getList();
    },
    onUnload() {
      this.pageVisible = false;
    },
    methods: {
      getBanner() {
        let data = {
          column: 'id,post_id,title,author_name,cover,published_at' //需要的字段名
        };
        uni.request<Banner>({
          url: 'https://unidemo.dcloud.net.cn/api/banner/36kr',
          data: data,
          success: data => {
            if (this.pageVisible) {
              this.refresherTriggered = false
              if (data.statusCode == 200) {
                const result = data.data
                if (result != null) {
                  this.banner = result;
                }
              }
            }
          },
          fail: (e) => {
            console.log('fail', e);
          }
        });
      },
      getList() {
        let url = "https://unidemo.dcloud.net.cn/api/news?column=id,post_id,title,author_name,cover,published_at";
        /* if (this.last_id != "") {
          const minId = parseInt((this.last_id))
          const time = new Date().getTime() + '';
          const pageSize = 10;
          url = url + "&minId=" + minId + "&time=" + time + "&pageSize=" + pageSize;
        } */

        uni.request<Item[]>({
          url: url,
          method: "GET",
          success: (res) => {
            if (this.pageVisible) {
              if (res.statusCode == 200) {
                console.log(res);
                const result = res.data
                if (result != null) {
                  this.listData = result //因本接口没有更多分页数据，所以重新赋值。正常有分页的列表应该如下面push方式增加数组项
                  // this.listData.push(...result)
                  // this.last_id = this.listData[0].id + "";
                }
                this.refresherTriggered = false;
              }
            }
          },
          fail: (res) => {
            if (this.pageVisible) {
              console.log('fail', res);
              this.refresherTriggered = false
            }
          }
        });
      },
      goDetail(e : Item) {
        const detail = e;
        const post_id = detail.post_id;
        const cover = detail.cover;
        const title = detail.title;
        uni.navigateTo({
          url: '/pages/template/list-news/detail/detail?post_id=' + post_id + "&cover=" + cover + "&title=" + title
        });
      },
      bannerClick(e : Banner) {
        const detail = e;
        const post_id = detail.post_id;
        const cover = detail.cover;
        const title = detail.title;
        uni.navigateTo({
          url: '/pages/template/list-news/detail/detail?post_id=' + post_id + "&cover=" + cover + "&title=" + title
        });
      },
      clickTH(index:number){
        uni.showModal({
          content: "点击表头项：" + index,
          showCancel: false
        });
      },
      onRefresherrefresh() {
        if (this.pageVisible) {
          this.refresherTriggered = true
          this.getBanner();
          this.getList();
        }
      }
    }
  };
</script>

<style>
  .banner {
    height: 360rpx;
    overflow: hidden;
    position: relative;
    background-color: #ccc;
  }

  .banner-img {
    width: 100%;
  }

  .banner-title {
    max-height: 84rpx;
    overflow: hidden;
    position: absolute;
    left: 30rpx;
    bottom: 30rpx;
    width: 90%;
    font-size: 32rpx;
    font-weight: 400;
    line-height: 42rpx;
    color: white;
  }

  .uni-media-list {
    padding: 22rpx 30rpx;
    box-sizing: border-box;
    display: flex;
    width: 100%;
    flex-direction: row;
  }

  .uni-media-list-logo {
    width: 180rpx;
    height: 140rpx;
  }

  .uni-media-list-body {
    flex: 1;
    padding-left: 15rpx;
    justify-content: space-around;
  }

  .uni-list-content {
    background-color: #FFFFFF;
    position: relative;
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid #c8c7cc;
    flex: 1;
  }

  .uni-media-list-text-top {
    /* height: 74rpx; */
    font-size: 28rpx;
    lines: 2;
    overflow: hidden;
  }

  .uni-media-list-text-bottom {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

  .uni-media-list-text {
    color: #9D9D9F;
    font-size: 25rpx;
  }
</style>