feat：add example code for a large of list optimization

smartspeaker/album/quickapp.config.js

@@ -1,5 +1,5 @@
 const path = require('path')
-const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+// const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 const TerserPlugin = require("terser-webpack-plugin");
 
 const resolve = dir => path.resolve(__dirname, dir)
@@ -8,7 +8,7 @@ module.exports = {
   // 在此处添加命令行
   cli: {
     trimDotnine: true,
-    devtool: 'none',
+    devtool: false,
     buildNameFormat: 'ORIGINAL',
     optimizeDescMeta: true
   },
@@ -21,18 +21,7 @@ module.exports = {
         "@": resolve('src')
       }
     },
-    module: {
-      rules: [
-        {
-          test: /\.css$/,
-          use: [MiniCssExtractPlugin.loader, 'css-loader']
-        },
-        {
-          test: /\.less$/,
-          use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
-        },
-      ]
-    }
+
   },
   postHook: (config) => {
     if (config.mode === "production") {

smartspeaker/album/src/app.ux

@@ -2,14 +2,15 @@
 import {dataList} from "@common/js/constants"
 
 export default {
-  bigThumbnailInfo: dataList,
-  thumbnailInfo: dataList,
-  isLastPage: true,
-  setDeviceAlbumStatus:true,
+  bigThumbnailInfo: dataList, // 大图url链接
+  thumbnailInfo: dataList, // 缩略图url
+  isLastPage: true, // 是否是最后一页
+  screenWidth:0,
+  screenHeight:0,
+  screenShape:"",
   time:0,
-  isScreensaver: false,
   async onCreate() {
-    console.log("### 🚀Album ~ app.ux ~ onCreate ###")
+    console.log("[album] [list.ux] ### 🚀Album ~ ### onCreate ###")
   },
   onDestroy() {
     console.log("app destroyed")

smartspeaker/album/src/common/js/constants.js

@@ -1,6 +1,11 @@
 const SAVE_SCREEN = "settings.lockscreen.currentid"
 const OPEN_ALBUM = "isOpenAlbum"
 const SCREENID = "album"
+const SCREEN_SHAPE = {
+  "rect": "rect",
+  "circle": "circle",
+  "pillShaped": "pill-shaped"
+}
 const dataList = [
   {
     imgUrl: "/common/images/data/1.png",
@@ -37,7 +42,151 @@ const dataList = [
   {
     imgUrl: "/common/images/data/9.png",
     id: 8
+  },
+  {
+    imgUrl: "/common/images/data/1.png",
+    id: 9
+  },
+  {
+    imgUrl: "/common/images/data/2.png",
+    id: 10
+  },
+  {
+    imgUrl: "/common/images/data/3.png",
+    id: 11
+  },
+  {
+    imgUrl: "/common/images/data/4.png",
+    id: 12
+  },
+  {
+    imgUrl: "/common/images/data/5.png",
+    id: 13
+  },
+  {
+    imgUrl: "/common/images/data/6.png",
+    id: 14
+  },
+  {
+    imgUrl: "/common/images/data/7.png",
+    id: 15
+  },
+  {
+    imgUrl: "/common/images/data/8.png",
+    id: 16
+  },
+  {
+    imgUrl: "/common/images/data/9.png",
+    id: 17
+  },
+  {
+    imgUrl: "/common/images/data/1.png",
+    id: 18
+  },
+  {
+    imgUrl: "/common/images/data/2.png",
+    id: 19
+  },
+  {
+    imgUrl: "/common/images/data/3.png",
+    id: 20
+  },
+  {
+    imgUrl: "/common/images/data/4.png",
+    id: 21
+  },
+  {
+    imgUrl: "/common/images/data/5.png",
+    id: 22
+  },
+  {
+    imgUrl: "/common/images/data/6.png",
+    id: 23
+  },
+  {
+    imgUrl: "/common/images/data/7.png",
+    id: 24
+  },
+  {
+    imgUrl: "/common/images/data/8.png",
+    id: 25
+  },
+  {
+    imgUrl: "/common/images/data/9.png",
+    id: 26
+  },
+  {
+    imgUrl: "/common/images/data/1.png",
+    id: 27
+  },
+  {
+    imgUrl: "/common/images/data/2.png",
+    id: 28
+  },
+  {
+    imgUrl: "/common/images/data/3.png",
+    id: 29
+  },
+  {
+    imgUrl: "/common/images/data/4.png",
+    id: 30
+  },
+  {
+    imgUrl: "/common/images/data/5.png",
+    id: 31
+  },
+  {
+    imgUrl: "/common/images/data/6.png",
+    id: 32
+  },
+  {
+    imgUrl: "/common/images/data/7.png",
+    id: 33
+  },
+  {
+    imgUrl: "/common/images/data/8.png",
+    id: 34
+  },
+  {
+    imgUrl: "/common/images/data/9.png",
+    id: 35
+  },
+  {
+    imgUrl: "/common/images/data/1.png",
+    id: 36
+  },
+  {
+    imgUrl: "/common/images/data/2.png",
+    id: 37
+  },
+  {
+    imgUrl: "/common/images/data/3.png",
+    id: 38
+  },
+  {
+    imgUrl: "/common/images/data/4.png",
+    id: 39
+  },
+  {
+    imgUrl: "/common/images/data/5.png",
+    id: 40
+  },
+  {
+    imgUrl: "/common/images/data/6.png",
+    id: 41
+  },
+  {
+    imgUrl: "/common/images/data/7.png",
+    id: 42
+  },
+  {
+    imgUrl: "/common/images/data/8.png",
+    id: 43
+  },
+  {
+    imgUrl: "/common/images/data/9.png",
+    id: 44
   }
 ]
 
-export {SAVE_SCREEN, OPEN_ALBUM, SCREENID,dataList}
+export { SAVE_SCREEN, OPEN_ALBUM, SCREENID, dataList, SCREEN_SHAPE }

smartspeaker/album/src/common/js/promisify.js

@@ -1,5 +1,5 @@
 /**
- * Convert Vela's asynchronous API into Promise.
+ * 将Vela的异步 API 转换成 Promise
  * @param {Object} feature
  * @param {String} methodName
  * @example

smartspeaker/album/src/common/js/util.js

@@ -1,6 +1,6 @@
 /**
- * turnObjAsQueryString
- * @param {Object} obj
+ * 拼接get参数
+ * @param {Object} obj 拼接get参数
  * @returns string
  */
 function turnObjAsQueryString(obj) {
@@ -9,33 +9,42 @@ function turnObjAsQueryString(obj) {
   }).join('&')
 }
 
-
 /**
- * url
- * @param {*} path 
- * @param {*} params 
+ * 拼接url及其参数
+ * @param {Object} params url的参数
+ * @param {String} path url的地址
  * @returns 
  */
-export function url(path, params) {
+export function getOpaque(path, params) {
   const str = path + '?' + turnObjAsQueryString({
     ...params
   })
   return str.toString()
 }
 
+// 定义防抖函数
+// func: 点击按钮要执行的函数
+// delay: 防抖时间
 /**
  * debounce
  * @param {*} func 
  * @param {*} delay 
  * @returns 
  */
 export function debounce(func, delay) {
+  // 设置定时器标识
   let timer
+  // 难点返回事件绑定函数
   return function () {
+    // func指定this
     let context = this
+    // func参数
     let args = arguments
+    // 先清除定时器
     clearTimeout(timer)
+    //设置定时器
     timer = setTimeout(() => {
+      // 调用函数
       func.apply(context, args)
     }, delay)
   }