fix(Album): 修复在页面 JS 中设置传入 urls 无效的问题

1.修复在页面 JS 中设置传入 urls 无效的问题
2.删除无用的 row、column 属性

close #1172

Author: juzi214032

examples/pages/components/layout/pages/album/index.js

@@ -5,7 +5,7 @@ Page({
    * 页面的初始数据
    */
   data: {
-    urls1_1: ['https://656e-env-9eb476-1258886794.tcb.qcloud.la/images/album/photo-3.jpg?sign=d71bb290f896e14bb800d0fb807f6764&t=1590025427'],
+    // urls1_1: ['https://656e-env-9eb476-1258886794.tcb.qcloud.la/images/album/photo-3.jpg?sign=d71bb290f896e14bb800d0fb807f6764&t=1590025427'],
     urls5: [
       'https://656e-env-9eb476-1258886794.tcb.qcloud.la/images/album/photo-1.jpg?sign=ff17b6597c5659186d54469e6122d153&t=1590025404',
       'https://656e-env-9eb476-1258886794.tcb.qcloud.la/images/album/photo-2.jpg?sign=7ccd10f793df154311f15a7b15d9ba57&t=1590025418',
@@ -31,14 +31,16 @@ Page({
    * 生命周期函数--监听页面加载
    */
   onLoad: function () {
-
+    this.setData({
+      urls1_1:['https://656e-env-9eb476-1258886794.tcb.qcloud.la/images/album/photo-3.jpg?sign=d71bb290f896e14bb800d0fb807f6764&t=1590025427']
+    });
   },
 
   /**
    * 生命周期函数--监听页面初次渲染完成
    */
   onReady: function () {
-
+    
   },
 
   /**

src/album/index.js

@@ -1,8 +1,5 @@
 // miniprogram_npm/lin-ui/album/index.js
 Component({
-  /**
-   * 组件的属性列表
-   */
   externalClasses: ['l-class', 'l-single-image-class', 'l-multi-image-class'],
   properties: {
     urls: {
@@ -63,42 +60,40 @@ Component({
     }
   },
 
-  /**
-   * 组件的初始数据
-   */
   data: {
     // 传值方式是新方式还是旧方式
     newType: true,
     // 单图短边大小
     shortSideValue: 0,
-    // 图片排列几行
-    row: 0,
-    // 图片排列几列
-    colum: 0,
     // 用于显示的图片列表
     showUrls: [],
     // 传入的url长度是否大于maxNumber指定的数量
     isLong: false,
   },
 
-  /**
-   * 组件的生命周期
-   */
-  lifetimes: {
-    attached() {
-      // 在组件实例进入页面节点树时执行
+  observers: {
+    'urls': function () {
+      this.init();
+    }
+  },
+
+  methods: {
+
+    /**
+     * 在 urls 数据变化后进行初始化
+     */
+    init() {
+      // 取出参数
+      let {urls, maxNumber, key} = this.data;
 
-      //判断传入urls长度
-      let urls = [];
-      if (this.data.urls.length > this.data.maxNumber) {
-        urls = this.data.urls.slice(0, this.data.maxNumber);
+      // 如果 urls 长度超出指定图片数量，则将其截断
+      if (urls.length > maxNumber) {
+        urls = urls.slice(0, maxNumber);
         this.setData({
           isLong: true,
         });
-        console.warn('图片数量超过maxNumber指定数量');
-      } else {
-        urls = this.data.urls;
       }
+
       this.setData({
         showUrls: urls
       });
@@ -109,26 +104,22 @@ Component({
           this.setData({
             everyRowNumber: 2
           });
-        } else(this.setData({
+        } else (this.setData({
           everyRowNumber: 3
         }));
       }
 
-      this.preview();
+      // 判断传入模式
+      const newType = this.judgeType();
+      this.setData({
+        newType
+      });
 
+      if (urls.length === 1) {
+        this.horizontalOrVertical(newType ? urls[0][key] : urls[0]);
+      }
     },
-  },
 
-  observers: {
-    'urls': function () {
-      this.preview();
-    }
-  },
-
-  /**
-   * 组件的方法列表
-   */
-  methods: {
     // 判断传入的urls是字符串列表(old模式)还是对象列表(new模式)
     judgeType() {
       const urls = this.data.urls;
@@ -156,22 +147,6 @@ Component({
       });
     },
 
-    // 显示图片
-    preview: function () {
-      // 判断传入模式
-      const newType = this.judgeType();
-      this.setData({
-        newType
-      });
-      //显示图片
-      const urls = this.data.urls;
-      const key = this.data.key;
-
-      if (urls.length === 1) {
-        this.horizontalOrVertical(newType ? urls[0][key] : urls[0]);
-      }
-    },
-
     onPreviewTap(e) {
       const index = e.currentTarget.id;
       let urls;
@@ -210,6 +185,5 @@ Component({
       }
       this.triggerEvent('lintap', detail, option);
     }
-
   }
 });