long-list.uvue

<template>
  <list-view class="list" @scrolltolower="loadData">
    <list-item class="list-item" v-for="(item, index) in dataList" :key="index">
      <view class="list-item-icon">
        <image class="list-item-icon-image" :src="item.img"></image>
      </view>
      <view class="list-item-fill">
        <view class="flex-row">
          <text class="title">{{item.name}}</text>
        </view>
        <view class="description">
          <text class="description-text">{{item.intro}}</text>
        </view>
        <!-- <view class="tag-list">
          <text class="tag-item" v-for="(item2, index2) in item.tags" :key="index2">{{item2.name}}</text>
        </view> -->
        <!-- <uts-rate></uts-rate> -->
        <view class="flex-row update-date">
          <text class="update-date-text">更新日期</text>
          <!-- <text class="update-date-value">{{item.updateDate}}</text> -->
          <!-- <text class="author">Dcloud</text> -->
        </view>
      </view>
    </list-item>
  </list-view>
</template>

<script>
  // TODO 临时地址
  const SERVER_URL = "https://test-ext.dcloud.net.cn/plugin/plugin-list"
  const PAGE_SIZE = 10; // 最大值 10

  // TODO 暂不支持tag，更新日期等属性
  type ListItem = {
    id : number,
    img : string,
    name : string,
    intro : string,
    // tags : Array<String>,
    // updateDate : string,
  }

  export default {
    data() {
      return {
        loading: false,
        dataList: [] as ListItem[],
        isEnded: false,
        $currentPage: 0
      }
    },
    onLoad() {
      this.loadData()
    },
    methods: {
      loadData() {
        if (this.loading || this.isEnded) {
          return
        }

        this.loading = true;

        uni.request({
          url: SERVER_URL,
          data: {
            page: this.$currentPage,
            pageSize: PAGE_SIZE
          },
          success: (res) => {
            const responseData = res.data as UTSJSONObject
            if (responseData['data'] == null) {
              return;
            }

            const responseDataList = responseData['data'] as UTSJSONObject[]
            for (const item in responseDataList) {
              this.dataList.push({
                id: item["id"] as number,
                img: 'https:' + item["img"] as string,
                name: item["name"] as string,
                intro: item["intro"] as string,
              } as ListItem)
            }

            this.isEnded = responseDataList.length <= 0;

            this.$currentPage++
          },
          fail: (err) => {
            console.log(err);
          },
          complete: () => {
            this.loading = false;
          }
        })
      }
    }
  }
</script>

<style>
  .flex-row {
    flex-direction: row;
  }

  .list {
    flex: 1;
    background-color: #ffffff;
  }

  .list-item {
    flex-direction: row;
    margin-top: 10px;
    padding: 10px;
  }

  .list-item-icon {
    position: relative;
  }

  .list-item-icon-image {
    width: 80px;
    height: 80px;
  }

  .list-item-icon-index {
    font-size: 12px;
    color: #cccccc;
    position: absolute;
    left: 2px;
    bottom: 2px;
  }

  .list-item-fill {
    flex: 1;
    margin-left: 15px;
  }

  .index {
    margin-left: 10px;
  }

  .description {
    margin-top: 5px;
  }

  .description-text {
    font-size: 13px;
    color: #666;
    margin-top: 5px;
  }

  .tag-list {
    flex-direction: row;
    margin-top: 5px;
  }

  .tag-item {
    font-size: 14px;
    font-weight: bold;
    background-color: #EFF9F0;
    color: #639069;
    border-radius: 20px;
    margin-right: 5px;
    padding: 2px 5px;
  }

  .update-date {
    margin-top: 10px;
  }

  .update-date-text {
    font-size: 12px;
    color: #888888;
  }

  .update-date-value {
    font-size: 12px;
    color: #777777;
    margin-left: 5px;
  }

  .author {
    font-size: 12px;
    color: #008000;
    margin-left: auto;
  }
</style>