<template>   <div     class="message-detail"     :style="dataList.length != 0 ? 'background: #f7f8fa;' : ''"   >     <!-- 列表 -->     <div class="content-wrap" id="content-wrap">       <message-detail-card         :dataList="dataList"         @getList="getList"       ></message-detail-card>
      <div class="footer-text" v-if="dataList.length != 0">         <van-loading v-if="tips" type="spinner" size="16px"           >載入中...</van-loading         >         <div v-else class="footer-text">沒有更多了</div>       </div>     </div>   </div> </template> <script> //這個端可以判斷角色 import { mapGetters } from "vuex"; import { getNoticeList} from "@/api/mine"; // import assetRevenueCard from "./asset-revenue-card.vue"; import messageDetailCard from "./message-detail-card.vue";
export default {   name: "message-detail",   components: {     messageDetailCard,     // assetRevenueCard   },   computed: {     ...mapGetters(["userInfo"]),   },   data() {     return {       // 列表資料       dataList: [],       tips: false,       title:"",       // 分頁       page: {         size: 15,         current: 1,         total: 0,       },     };   },   created() {     this.title = localStorage.getItem("title")     this.getList();   },   methods: {     // 獲取列表     getList() {       this.tips = true;         getNoticeList({           noticeTitle:this.title,           current: this.page.current,           size: this.page.size,         }).then((res) => {           const data = res.data.data;           this.page.total = data.total;           //分頁           if (this.page.current == 1) {             this.dataList = JSON.parse(JSON.stringify(data.records));           } else if (this.dataList.length <= this.page.total) {             this.dataList = JSON.parse(               JSON.stringify(this.dataList.concat(data.records))             );           }            this.tips = false;         });     },     //滾動事件-觸底載入     handleScroll() {       //1.獲取滾動區域元素       let contentWrap = document.getElementById("content-wrap");       if (contentWrap) {         //2.獲取元素高度         let height = contentWrap.offsetHeight;         //3.獲取滾動區域到頭部的距離         let top = contentWrap.scrollTop || document.documentElement.scrollTop;         //4.獲取滾動條高度         let scrollHeight = contentWrap.scrollHeight;         //5.滾動條到底部的條件 (滾動區域到頭部的距離 + 螢幕高度 = 可滾動的總高度)         if (top + height + 1 >= scrollHeight) {           this.loadMore();         }       }     },     // 列表上拉載入     loadMore() {       if (this.tips) return; //節流閥判斷       if (Math.ceil(this.page.total / this.page.size) > this.page.current) {         this.page.current++;         this.getList();       }     },   },   mounted() {     // 監聽滾動事件，然後用handleScroll這個方法進行相應的處理     window.addEventListener("scroll", this.handleScroll, true);   },   // 離開這個頁面銷燬滾動條事件，不然會給每一個頁面都觸發   beforeDestroy() {     window.removeEventListener("scroll", this.handleScroll, true);   }, }; </script>
<style scoped lang="scss"> .message-detail {   min-height: 100vh;   box-sizing: border-box;   overflow: hidden;   .content-wrap {     overflow: auto;   }   :deep(.van-empty) {     padding-top: 40%;   } } </style>   如果您想快速高效解決問題，這裡可以有償幫您直接解決bug，我們團隊的微訊號是18062748486；如加微信，請備註“Bug 解決“；