akmon/pages/mt/list-news.uvue

<template>
  <list-view style="flex: 1;" refresher-enabled=true @refresherrefresh="onRefresherrefresh"
    :refresher-triggered="refresherTriggered" enable-back-to-top="true">
    <list-item class="banner" @click="bannerClick(banner)" type=1>
        <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;">
        <text v-for="(name,index) in th_item" :key="index" @click="clickTH(index)" style="margin-right: 20px;">
          {{name}}
        </text>
      </view>
    </sticky-header>
    <list-item v-for="(value, index) in listData" :key="index" type=2>
      <view class="uni-list-cell" hover-class="uni-list-cell-hover" @click="goDetail(value, index)">
        <view class="uni-media-list">
          <share-element :share-key="'image_'+index">
            <image class="uni-media-list-logo" :src="value.cover"></image>
          </share-element>
          <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: '',
      };
    },
    onLoad() {
      this.getBanner();
      this.getList();
    },
    onUnload() {
    },
    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 => {
            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 (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) => {
            console.log('fail', res);
            this.refresherTriggered = false
          }
        });
      },
      goDetail(e : Item, key : number) {
        const detail = e;
        const post_id = detail.post_id;
        let cover = detail.cover;
        // #ifdef APP-ANDROID
        cover = btoa(cover);
        // #endif
        const title = detail.title;
        uni.navigateTo({
          url: '/pages/template/list-news/detail/detail?post_id=' + post_id + "&cover=" + cover + "&title=" + title +"&shareKey=image_"+key
        });
      },
      bannerClick(e : Banner) {
        const detail = e;
        const post_id = detail.post_id;
        let cover = detail.cover ?? "";
        // #ifdef APP-ANDROID
        cover = btoa(cover);
        // #endif
        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() {
        this.refresherTriggered = true
        this.getBanner();
        this.getList();
      }
    }
  };
</script>

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

  .banner-img {
    width: 100%;
  }

  .banner-title {
    max-height: 42px;
    overflow: hidden;
    position: absolute;
    left: 15px;
    bottom: 15px;
    width: 90%;
    font-size: 16px;
    font-weight: 400;
    line-height: 21px;
    color: white;
  }

  .uni-media-list {
    padding: 11px 15px;
    box-sizing: border-box;
    display: flex;
    width: 100%;
    flex-direction: row;
  }

  .uni-media-list-logo {
    width: 90px;
    height: 70px;
  }

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

  .uni-media-list-text-top {
    /* height: 37px; */
    font-size: 14px;
    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: 13px;
  }
</style>