1

PC-20250623MANY\Administrator

2025-08-13 79db9782438e27a9006d540d18d649c720180a31

 src/page/home/newList.vue

@@ -1,49 +1,42 @@
<template>
  <div class="new_list">
    <page-head :title="$t('hj6')"></page-head>
    <tab-head :title="$t('hj6')"></tab-head>

    <news-item v-for="item in newsList" :key="item.id" :item="item"></news-item>

    <div class="more-news" @click="getMore" v-if="newsList.length > 0">
      <span v-if="lod == 1">{{ $t("加载更多") }}</span>
      <span v-else-if="lod == 2">{{ $t("加载中") }}</span>
      <span v-else-if="lod == 3">{{ $t("沒有更多了") }}</span>
    </div>

    <van-skeleton
      :row="10"
      v-if="newsList.length == 0"
      style="margin-top: 1em;"
    />

    <n-pagination
      :pageNo.sync="pageNum"
      :pageSize="pageSize"
      :total="total"
    ></n-pagination>
  </div>
</template>

<script>
import PageHead from "@/components/pageHead.vue";
import tabHead from "@/components/tabHead.vue";
import NewsItem from "./components/newsItem.vue";
import nPagination from "@/components/nPagination.vue";
import * as api from "@/axios/api";

export default {
  name: "newList",
  components: {
    PageHead,
    NewsItem,
    nPagination
    tabHead,
    NewsItem
  },
  data() {
    return {
      pageNum: 1,
      pageSize: 10,
      total: 0,
      newsList: []
      newsList: [],
      lod: 1 // 1 加载更多 2 加载中 3 沒有更多了
    };
  },
  watch: {
    pageNum() {
      this.newsList = [];
      this.getNewsList();
    }
  },
  created() {
    this.getNewsList();
@@ -58,8 +51,17 @@
      };
      let data = await api.getNewsList(options);

      this.newsList = data.data.list;
      this.newsList = [...this.newsList, ...data.data.list];
      this.total = data.data.total;
      this.lod = 1;
      if (this.total <= this.newsList.length) this.lod = 3;
    },
    // 加载更多
    getMore() {
      if (this.lod == 3) return;
      this.lod = 2;
      this.pageNum++;
      this.getNewsList();
    }
  }
};
@@ -69,8 +71,8 @@
.new_list {
  font-size: 10vw;
  width: 100%;
  background-color: #fff;
  min-height: 100vh;
  padding-bottom: 0.1em;
  padding-bottom: 1.4rem;

}
</style>