improve big list performance

xiaozhuai · Feb 6, 2020 · ae1617a · ae1617a
1 parent 5f58fe7
commit ae1617a
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 220 deletions.
diff --git a/package.json b/package.json
@@ -21,6 +21,7 @@
         "lodash": "^4.17.15",
         "moment": "^2.24.0",
         "vue": "^2.6.10",
+        "vue-virtual-scroll-list": "^1.4.4",
         "vuex": "^3.0.1"
     },
     "devDependencies": {

diff --git a/src/App.vue b/src/App.vue
@@ -21,7 +21,7 @@ html, body, #app {
     margin: 0;
     padding: 0;
     width: 400px;
-    height: 600px;
+    height: 576px;
     overflow: hidden;
 }
 </style>
diff --git a/src/components/ExplorerPanel.vue b/src/components/ExplorerPanel.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="explorer-panel" v-loading="loading">
-        <el-table :data="tableData" @selection-change="handleSelectionChange" style="width: 100%;" height="482">
+        <el-table :data="tableData" @selection-change="handleSelectionChange" style="width: 100%;" height="458">
             <el-table-column type="selection" width="42" align="center"/>
             <el-table-column width="54" align="center" label="Type">
                 <i slot-scope="scope" :class="getIcon(scope.row.type)"></i>

diff --git a/src/components/FileItem.vue b/src/components/FileItem.vue
@@ -292,6 +292,7 @@ export default {
     height: 62px;
     border-bottom: 1px solid #eeeeee;
     overflow: hidden;
+    box-sizing: border-box;
 }
 
 .file-item:hover {

diff --git a/src/components/MainPanel.vue b/src/components/MainPanel.vue
@@ -5,10 +5,13 @@
             <div class="title">{{$tr('extName')}}</div>
         </div>
         <div class="body">
-            <div class="file-list">
-                <template v-for="item of $store.state.itemList">
-                    <file-item :item="item"/>
-                </template>
+            <div class="file-list" v-loading="listLoading">
+                <virtual-list :size="62" :remain="8"
+                              :item="FileItem"
+                              :itemcount="$store.state.itemList.length"
+                              :itemprops="getFileItemProps">
+<!--                    <file-item v-for="item of $store.state.itemList" :item="item"/>-->
+                </virtual-list>
             </div>
         </div>
         <div class="footer">
@@ -63,20 +66,23 @@ import FileItem from "./FileItem";
 import PreferencePanel from "./PreferencePanel";
 import AboutPanel from "./AboutPanel";
 import ExplorerPanel from "./ExplorerPanel";
+import VirtualList from 'vue-virtual-scroll-list'
 
 export default {
     name: "MainPanel",
-    components: {ExplorerPanel, AboutPanel, PreferencePanel, FileItem},
+    components: {ExplorerPanel, AboutPanel, PreferencePanel, FileItem, VirtualList},
     created() {
         this.loadHistory();
         this.registerMessageListener();
     },
     data() {
         return {
+            FileItem: FileItem,
             clearPopoverVisible: false,
             preferencePanelVisible: false,
             aboutPanelVisible: false,
             explorerPanelVisible: false,
+            listLoading: true,
             hasShowAcceptDanger: {}
         }
     },
@@ -89,6 +95,7 @@ export default {
                 }
                 this.$store.commit('setItemList', itemList);
                 this.autoShowAcceptDanger();
+                this.listLoading = false;
             });
         },
         registerMessageListener() {
@@ -172,6 +179,14 @@ export default {
                     });
                 }
             });
+        },
+        getFileItemProps(index) {
+            return {
+                props: {
+                    item: this.$store.state.itemList[index]
+                },
+                attrs: {},
+            }
         }
     }
 }
@@ -225,7 +240,10 @@ export default {
 .file-list {
     width: 100%;
     height: 100%;
-    overflow-y: auto;
+}
+
+.file-list>div::-webkit-scrollbar{
+    display:none;
 }
 
 .file-list .file-item:last-child {