【我的素材-全景图片】分页模式改成无限滚动。

src/components/table/index.vue

@@ -10,7 +10,10 @@
       </li>
     </ul>
     <!-- 表格内容区域 -->
-    <div class="t-con">
+    <div class="t-con"
+      v-infinite-scroll="requestMoreData"
+      :infinite-scroll-disabled="!canRequestMoreData"
+    >
       <ul class="t-item" active-txt :class="{'bottom-line': showLine}" v-for="(item, i) in fixdata" :key="i">
         <!-- 复选框 -->
         <li v-if="selection" class="check-cls" ><span @click="selectItem(item,i)" class="fdcheck" :class="{check_active:item.hasAuth}"></span></li>
@@ -27,8 +30,15 @@
 import { mapState } from 'vuex'
 
 export default {
-  props: [
-    'data',
+  props: {
+    canRequestMoreData: {
+      type: Boolean,
+      default: true
+    },
+    data: {
+      type: Array,
+      default: Array
+    },
     /**
      * 表头数据：各列名称和配置
      * fontweight: Boolean，某一列是否是关键列,会加粗显示
@@ -37,12 +47,21 @@ export default {
      * width: Number,该列宽度
      * textAlign: css属性值
      */
-    'header',
+    header: {
+      type: Array,
+      default: Array
+    },
     // 是否显示复选框
-    'selection',
+    selection: {
+      type: Boolean,
+      defaut: false
+    },
     // 是否显示每行之间的分隔线
-    'showLine'
-  ],
+    showLine: {
+      type: Boolean,
+      default: false
+    }
+  },
   data () {
     return {
       innerW: window.innerWidth,
@@ -77,6 +96,10 @@ export default {
     }
   },
   methods: {
+    requestMoreData() {
+      console.log('needMoreData!');
+      this.$emit('request-more-data')
+    },
     handleSelect () {
       let arr = this.fixdata.filter(item => {
         return item.hasAuth

src/components/table/style.less

@@ -25,6 +25,8 @@
   }
 
   .t-con {
+    height: 500px;
+    overflow: auto;
     .t-item {
       display: flex;
       align-items: center;

src/mixins/index.js

@@ -8,7 +8,7 @@ import clickoutside from "./v-clickoutside";
 import clickwindow from "./v-clickwindow";
 import * as api from "../api";
 
-import { Message, Tooltip } from 'element-ui'
+import { Message, Tooltip, InfiniteScroll } from 'element-ui'
 
 const MARERIAL = ["image", "pano", "scene", "audio", "video"];
 
@@ -33,6 +33,8 @@ let STRSTATUS = {
   5: "上传失败"
 };
 
+Vue.use(InfiniteScroll)
+
 Vue.prototype.$bus = bus;
 Vue.prototype.$api = api;
 Vue.prototype.$intranet = config.intranet;

src/views/material/pano/index.vue

@@ -39,13 +39,13 @@
       <div class="filter">
         <div>
           <i
-            @click="(paging.current = 1) && getMaterialList()"
+            @click="getMaterialList()"
             class="iconfont icon-works_search"
           ></i>
           <input
             type="text"
             v-model="searchKey"
-            @keyup.enter="(paging.current = 1) && getMaterialList()"
+            @keyup.enter="getMaterialList()"
             placeholder="搜索文件夹或素材"
           />
         </div>
@@ -58,6 +58,8 @@
             selectedArr = data;
           }
         "
+        @request-more-data="getMaterialList"
+        :canRequestMoreData="hasMoreData && !isRequestingMoreData"
         :header="tabHeader"
         :showLine="true"
         :selection="false"
@@ -111,15 +113,16 @@
               sub.fontweight && ((showPreview = true), (popupItem = item))
             "
             :style="{ fontWeight: sub.fontweight, color: '#202020' }"
-            >{{ data || "-" }}</span
-          >
+            >{{ data || "-" }}
+          </span>
         </div>
       </tableList>
-      <div class="nodata" v-if="list.length == 0 && isClickSearch">
+      <div class="total-number" v-if="list.length !== 0 || hasMoreData">已加载{{list.length}}条</div>
+      <div class="nodata" v-if="list.length == 0 && !hasMoreData && isClickSearch">
         <img :src="$noresult" alt="" />
         <span>未搜索到结果</span>
       </div>
-      <div class="nodata" v-if="list.length == 0 && !isClickSearch">
+      <div class="nodata" v-if="list.length == 0 && !hasMoreData && !isClickSearch">
         <img :src="config.empty" alt="" />
         <span>暂无素材~</span>
         <button @click="$refs.uploadFile.click()" class="upload-btn-in-table">上传素材</button>
@@ -177,6 +180,7 @@ import {
 
 const TYPE = "pano";
 const LONGPOLLINGTIME = 10;
+const PAGE_SIZE = 20;
 
 export default {
   name: 'Pano',
@@ -193,7 +197,7 @@ export default {
   data() {
     return {
       config,
-      isLongPolling: false,
+      isLongPolling: false, // TODO?
       showRename: false,
       showPreview: false,
       showCover: false,
@@ -209,28 +213,16 @@ export default {
         },
       ],
       list: [],
+      hasMoreData: true,
+      isRequestingMoreData: false,
       uploadList: [],
       isClickSearch: "",
-      paging: {
-        pageSize: 8,
-        pageNum: 1,
-        total: 0,
-        showSize: 4,
-        current: 1,
-      },
     };
   },
   mounted() {
-    this.getMaterialList();
+    // this.getMaterialList();
   },
   watch: {
-    "paging.pageNum": function () {
-      this.getMaterialList();
-    },
-    searchKey(){
-      this.paging.current = 1
-      this.getMaterialList();
-    },
     isLongPolling: {
       handler: function (newVal) {
         if (!newVal) {
@@ -433,28 +425,30 @@ export default {
           });
       });
     },
-    changeCurrent(data) {
-      this.paging.pageNum = data;
-    },
     getMaterialList(islongpolling = null) {
       this.isClickSearch = !!this.searchKey;
-
+      this.isRequestingMoreData = true
       getMaterialList(
         {
-          pageNum: this.paging.pageNum,
-          pageSize: this.paging.pageSize,
+          pageNum: Math.floor(this.list.length / PAGE_SIZE) + 1,
+          pageSize: PAGE_SIZE,
           searchKey: this.searchKey,
           type: TYPE,
           islongpolling
         },
         (data) => {
-          this.list = data.data.list.map((i) => {
+          const newData = data.data.list.map((i) => {
             i.fileSize = changeByteUnit(Number(i.fileSize));
             return i;
           });
-          this.paging.pageNum = data.data.pageNum;
-          this.paging.pageSize = data.data.pageSize;
-          this.paging.total = data.data.total;
+          this.list = this.list.concat(newData)
+          if (this.list.length === data.data.total) {
+            this.hasMoreData = false
+          }
+          this.isRequestingMoreData = false
+        },
+        () => {
+          this.isRequestingMoreData = false
         }
       );
     },

src/views/material/style.less

@@ -43,6 +43,7 @@
     
   >.list{
     margin-top: 32px;
+    position: relative;
     .img{
       width: 50px;
       height: 50px;
@@ -61,6 +62,34 @@
       position: relative;
       text-align: left;
     }
+    .total-number {
+      text-align: right;
+      font-size: 14px;
+      color: #646566;
+    }
+    // TODO:受到src/assets/style/component.less里.nodata的干扰
+    .nodata{
+      position: absolute;
+      text-align: center;
+      width: 100%;
+      margin: 0;
+      top: 150px;
+        >span{
+          color: #646566;
+        }
+        .create{
+          width: 100px;
+          margin: 0 auto;
+          margin-top: 20px;
+          height: 36px;
+          color: #fff;
+          line-height: 36px;
+          background: linear-gradient(144deg, #00AEFB 0%, #0076F6 100%);
+          border-radius: 22px;
+          text-align: center;
+        }
+      }
+    }
   }
 .handle{
   display: flex;
@@ -283,26 +312,6 @@
     width: 100%;
   }
 }
-.nodata{
-  text-align: center;
-  width: 100%;
-  margin: 100px auto;
-    >span{
-      color: #646566;
-    }
-    .create{
-      width: 100px;
-      margin: 0 auto;
-      margin-top: 20px;
-      height: 36px;
-      color: #fff;
-      line-height: 36px;
-      background: linear-gradient(144deg, #00AEFB 0%, #0076F6 100%);
-      border-radius: 22px;
-      text-align: center;
-    }
-  }
-}
 
 
 .panorama{