无限加载+懒加载图片

src/renderer/components/Appbox/index.vue

 <template>
-  <div>
+  <div v-infinite-scroll="loadNext">
     <box v-if="listObj && listObj.lastest">
-      <item v-for="(lItem,lIndex) in listObj.lastest" :key="lIndex"
+      <item v-for="(lItem,lIndex) in currentList" :key="lIndex"
         :src="lItem.icon"
         :name="lItem.name"
         :detail="lItem"
@@ -136,19 +136,46 @@ export default {
         top:0,
         current:-1,
         id:-1,
+      },
+      currentList:[],
+      pageData: {
+        page:1,
+        total:-1,
       }
     };
   },
   computed: {
 
+  },
+  watch: {
+    'listObj.lastest' : {
+      handler(n) {
+        this.pageData.total = this.listObj && this.listObj.lastest.length || 0;
+        if(this.currentList.length == 0) {
+          this.currentList = this.listObj && this.listObj.lastest.slice(0,19);
+        }
+      },
+      immediate:true,
+      deep:true
+    }
   },
   created() {
     this.listener();
+    this.currentList = this.listObj && this.listObj.lastest.slice(0,19);
   },
   destroyed() {
     window.removeEventListener("contextmenu",this.handleEvent)
   },
   methods: {
+    loadNext() {
+      if(this.currentList.length >= this.pageData.total && this.pageData.total != 0) {
+        return;
+      }
+      // 加载下一页
+      this.pageData.page ++ ;
+      let newData = this.listObj.lastest.slice((this.pageData.page-1)*18+1,(this.pageData.page*18 + 1));
+      this.currentList = this.currentList.concat(newData);
+    },
     findParentEl({dataType, element, className}) {
         if(dataType) {
             if(element.dataset.type === dataType) return element;
@@ -161,7 +188,6 @@ export default {
         return null;
     },
     handleEvent(e) {
-      console.dir(e)
       e.preventDefault();
       e.stopPropagation();
       if(e.target.dataset.type === 'closeMask' || this.showMenu) {

src/renderer/components/Appbox/item.vue

 <template>
   <div v-if="src && (src.indexOf('data:image/svg') == 0 || src.indexOf('data:image/png') == 0)" 
     class="item_wrap" @click="tapApp" data-type="right-menu" :data-id="detail.id" :data-index="index">
-    <img :src="src" alt="" class="item_img">
+    <!-- <img :src="src" alt="" class="item_img" lazy> -->
+    <el-image :src="src" alt="" class="item_img" :lazy="index>18"></el-image>
     <span class="item_name">{{name}}</span>
   </div>
 </template>

vue.config.js

@@ -13,24 +13,24 @@ module.exports = {
         VERSION: JSON.stringify(machineIdSync({original: true}))
       })
     ],
-    devtool: 'source-map', // 'source-map' \ false
-    optimization: {
-      minimize: true,
-      minimizer: [
-        new TerserPlugin({ // 要引用 TerserPlugin
-          terserOptions: {
-            ecma: undefined,
-            warnings: false,
-            parse: {},
-            compress: {
-              drop_console: true,
-              drop_debugger: false,
-              pure_funcs: ['console.log'] // 移除console
-            }
-          },
-        }),
-      ],
-    }
+    // devtool: 'source-map', // 'source-map' \ false
+    // optimization: {
+    //   minimize: true,
+    //   minimizer: [
+    //     new TerserPlugin({ // 要引用 TerserPlugin
+    //       terserOptions: {
+    //         ecma: undefined,
+    //         warnings: false,
+    //         parse: {},
+    //         compress: {
+    //           drop_console: true,
+    //           drop_debugger: false,
+    //           pure_funcs: ['console.log'] // 移除console
+    //         }
+    //       },
+    //     }),
+    //   ],
+    // }
   },
   pages: {
     app: {