pointsMall/src/views/PointsRank/History.vue

<template>
    <div class="timeline-container">
       <div class="timeline-content">
           <div class="timeline-entry-list">
               
               <div class="entry-list-container">
                历史总积分排行
               </div>
           </div>
           <SiderInfo></SiderInfo>
       </div>
   </div>
</template>
   
 
 <script>
 import { msgList } from "@/api/allApi";
 import SiderInfo from '@/components/SiderInfo.vue'
 export default{
 components: {
   SiderInfo,
 },
 data() {
   return {
       dataList:[],
       page:1,
       pages:1,
   };
 },
 created(){
   this.getDataList();
 },
 methods:{
   handleClickMag(id) {
       this.$router.push({
           path: '/home/index/msgDetail',
           query: {
               id: id,
           }
       });
   },
   getDataList(){
       let data = {
           limit:10,
           page:this.page,
           type:0,
       };
       msgList(data).then(response=>{
           if(this.page==1){
               this.dataList = response.data.data.list;
               this.page = response.data.data.pageNum;
               this.pages = response.data.data.pages;
           }else{
               this.dataList = [
                   ...this.dataList,
                   ...response.data.data.list
               ]
           }
           ++this.page  
       })
   },
    // 保存滚动值，这是兼容的写法
    handleScroll () {
       if((document.documentElement.scrollTop + window.innerHeight) == document.body.offsetHeight){
           if(this.page > this.pages){
               return
           }else{
               this.getDataList();
           }
       }
   },
 },
 
 mounted () {
   window.addEventListener('scroll', this.handleScroll, true)
 },
 
 destroyed () {
   // 离开该页面需要移除这个监听的事件，不然会报错
   window.removeEventListener('scroll', this.handleScroll)
 }
 }
 </script>
 <style>
 .timeline-container{
   margin: 0 auto;
 }
 .timeline-entry-list{
   margin-right: 17.5rem;
   border-radius: 2px;
   width: 720px;
   position: relative;
 }
 .entry-list-container{
   background-color: #fff;
   border-radius: 4px;
 }
 .entry-list-container .tab-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 20px 20px 16px;
   border-bottom: 1px solid #e5e6eb;
   overflow: hidden;
 }
 
 .tab-header .tab-title {
   white-space: nowrap;
   font-size: 18px;
   font-weight: 600;
   color: #1e80ff;
 }
 .entry-list{
   width: 100%;
   background-color: #fff;
   position: relative;
 }
 .list-item:hover {
   background: #fafafa;
 }
 .list-item{
   position: relative;
   cursor: pointer;
   padding: 12px 20px 0;
 }
 .list-item .meta-container{
   display: flex;
   align-items: center;
 }
 .list-item .meta-container .user-message{
   max-width: 162px;
   font-size: 13px;
   line-height: 22px;
   color: #4e5969;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   word-break: break-all;
 }
 .list-item .meta-container .dividing{
   line-height: 22px;
   width: 1px;
   height: 14px;
   background: #e5e6eb;
   margin: 0 8px;
 }
 .list-item .meta-container .date{
   line-height: 22px;
   font-size: 13px;
   color: #86909c;
 }
 .list-item .main{
   margin-top: 6px;
   padding-bottom: 12px;
   display: flex;
   border-bottom: 1px solid #e5e6eb;
 }
 .list-item .main .info-box{
   flex-grow: 1;
 }
 .list-item .main .info-box .title:visited {
   color: #86909c;
 }
 .list-item .main .info-box .title{
   font-weight: 700;
   font-size: 16px;
   line-height: 24px;
   color: #1d2129;
   margin-bottom: 8px;
   display: -webkit-box;
   overflow: hidden;
   text-overflow: ellipsis;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 1;
 }
 .list-item .main .info-box .description{
   font-weight: 400;
   font-size: 13px;
   line-height: 22px;
   color: #86909c;
   display: -webkit-box;
   overflow: hidden;
   text-overflow: ellipsis;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
 }
 .list-item .thumb{
   flex: 0 0 auto;
   width: 120px;
   height: 80px;
   margin-left: 24px;
   border-radius: 2px;
 }
 </style>