build: Travis CI automatic compilation

juzi214032 · juzi214032 · commit f6a937b07572 · 2020-08-06T09:45:42.000+08:00
diff --git a/dist/album/index.js b/dist/album/index.js
diff --git a/dist/album/index.wxml b/dist/album/index.wxml
@@ -1,6 +1,9 @@
 <wxs src="index.wxs" module="album"></wxs>
-<view class="container l-class" style="{{album.containerStyle(urls, multipleSize, gapRow, gapColumn)}}">
-    <block wx:for="{{urls}}" wx:key="index">
-        <image id="{{index}}" mut-bind:tap="onPreviewTap" class="{{album.blockClass(urls, horizontalScreen)}}" style="{{album.blockStyle(urls, horizontalScreen, shortSideValue, singleSize, multipleSize)}}" src="{{newType?item[key]:item}}" mode="{{urls.length === 1?singleMode:multipleMode}}"/>
+<view style="{{album.gridStyle(gapRow, gapColumn, multipleSize, everyRowNumber)}}">
+    <block wx:for="{{showUrls}}" wx:key="index" class="child">
+        <view class="imageContainer {{album.dimBack(isLong, index, maxNumber, previewFullImage)}}" style="{{album.blockStyle(urls, horizontalScreen, shortSideValue, singleSize, multipleSize)}}">
+            <image class="{{album.dim(isLong, index, maxNumber, previewFullImage)}}}" id="{{index}}" bind:tap="onPreviewTap" style="{{album.blockStyle(urls, horizontalScreen, shortSideValue, singleSize, multipleSize)}}" src="{{newType?item[key]:item}}" mode="{{urls.length === 1?singleMode:multipleMode}}"/>
+            <view wx:if="{{album.image(isLong, index, maxNumber, previewFullImage)}}" class="text">+{{urls.length-maxNumber}}</view>
+        </view>
     </block>
 </view>
diff --git a/dist/album/index.wxs b/dist/album/index.wxs
@@ -1,5 +1,4 @@
 var containerStyle = function (urls, multipleSize, gapRow, gapColumn) {
-    urls.length === 2 || urls.length === 4 ? 'width:' + (2 * multipleSize + gapRow) + 'rpx;' : 'width:' + (3 * multipleSize + 2 * gapRow) + 'rpx;'
     if (urls.length === 2 || urls.length === 4) {
         return 'width:' + (2 * multipleSize + gapRow) + 'rpx; grid-row-gap:' + gapColumn + 'rpx; grid-column-gap:' + gapRow + 'rpx;grid-template-columns:repeat(auto-fit, ' + multipleSize + 'rpx);'
     } else {
@@ -32,8 +31,49 @@ var blockStyle = function (urls, horizontalScreen, shortSideValue, singleSize, m
     }
 }
 
+var gridStyle = function (gapRow, gapColumn, multipleSize, everyRowNumber) {
+    return 'display:inline-grid;grid-template-columns: repeat(' + everyRowNumber + ',' + multipleSize + 'rpx);grid-row-gap:' + gapRow + 'rpx;grid-column-gap:' + gapColumn + 'rpx;'
+}
+
+var dimBack = function (isLong, index, maxNumber, previewFullImage) {
+    if (previewFullImage) {
+        if (isLong) {
+            if (index == maxNumber - 1) {
+                return 'dimback'
+            }
+        }
+    }
+    return ''
+}
+
+var dim = function (isLong, index, maxNumber, previewFullImage) {
+    if (previewFullImage) {
+        if (isLong) {
+            if (index == maxNumber - 1) {
+                return 'dim'
+            }
+        }
+    }
+    return ''
+}
+
+var image = function (isLong, index, maxNumber, previewFullImage) {
+    if (previewFullImage) {
+        if (isLong) {
+            if (index == maxNumber - 1) {
+                return true
+            }
+        }
+    }
+    return false
+}
+
 module.exports = {
     containerStyle: containerStyle,
     blockClass: blockClass,
-    blockStyle: blockStyle
+    blockStyle: blockStyle,
+    gridStyle: gridStyle,
+    dimBack: dimBack,
+    dim: dim,
+    image: image,
 }
diff --git a/dist/album/index.wxss b/dist/album/index.wxss
@@ -1 +1 @@
-.container{display:grid}.vertical{height:360rpx}
+.container{display:grid}.vertical{height:360rpx}.parent{display:inline-grid;grid-template-columns:repeat(auto-fill)}.child{box-sizing:border-box;background-color:#fff;flex:0 0 44%;height:100px;border:1px solid red;margin-top:4%;margin-left:2%;margin-right:2%}.dimback{background:#000}.dim{opacity:.6}.imageContainer{position:relative}.imageContainer:last-child>.text{color:#fff;font-weight:700;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:larger}
diff --git a/examples/dist/album/index.js b/examples/dist/album/index.js
@@ -44,6 +44,22 @@ Component({
     key: {
       type: String,
       value: 'url'
+    },
+    maxNumber: {
+      type: Number,
+      value: 9
+    },
+    customRowNumber: {
+      type: Boolean,
+      value: false
+    },
+    everyRowNumber: {
+      type: Number,
+      value: 3
+    },
+    previewFullImage: {
+      type: Boolean,
+      value: true,
     }
   },
 
@@ -59,6 +75,10 @@ Component({
     row: 0,
     // 图片排列几列
     colum: 0,
+    // 用于显示的图片列表
+    showUrls: [],
+    // 传入的url长度是否大于maxNumber指定的数量
+    isLong: false,
   },
 
   /**
@@ -69,12 +89,29 @@ Component({
       // 在组件实例进入页面节点树时执行
 
       //判断传入urls长度
-      if (this.data.urls.length > 9) {
-        const urls = this.data.urls.slice(0, 9);
+      let urls = [];
+      if (this.data.urls.length > this.data.maxNumber) {
+        urls = this.data.urls.slice(0, this.data.maxNumber);
         this.setData({
-          urls
+          isLong: true,
         });
-        console.warn('超过9张图片！');
+        console.warn('图片数量超过maxNumber指定数量');
+      } else {
+        urls = this.data.urls;
+      }
+      this.setData({
+        showUrls: urls
+      });
+
+      if (!this.data.customRowNumber) {
+        let urlLength = this.data.showUrls.length;
+        if (urlLength > 1 && urlLength < 5) {
+          this.setData({
+            everyRowNumber: 2
+          });
+        } else(this.setData({
+          everyRowNumber: 3
+        }));
       }
 
       this.preview();
@@ -137,7 +174,13 @@ Component({
 
     onPreviewTap(e) {
       const index = e.currentTarget.id;
-      const urls = this.data.urls;
+      let urls;
+      if (this.data.previewFullImage) {
+        urls = this.data.urls;
+      } else {
+        urls = this.data.showUrls;
+      }
+
       let tempFilePath = '';
       let previewImageList = [];
       const newType = this.data.newType;
diff --git a/examples/dist/album/index.wxml b/examples/dist/album/index.wxml
@@ -1,6 +1,9 @@
 <wxs src="index.wxs" module="album"></wxs>
-<view class="container l-class" style="{{album.containerStyle(urls, multipleSize, gapRow, gapColumn)}}">
-    <block wx:for="{{urls}}" wx:key="index">
-        <image id='{{index}}' mut-bind:tap="onPreviewTap" class="{{album.blockClass(urls, horizontalScreen)}}" style="{{album.blockStyle(urls, horizontalScreen, shortSideValue, singleSize, multipleSize)}}" src="{{newType?item[key]:item}}" mode="{{urls.length === 1?singleMode:multipleMode}}" />
+<view style="{{album.gridStyle(gapRow, gapColumn, multipleSize, everyRowNumber)}}">
+    <block wx:for="{{showUrls}}" wx:key="index" class="child">
+        <view class="imageContainer {{album.dimBack(isLong, index, maxNumber, previewFullImage)}}" style="{{album.blockStyle(urls, horizontalScreen, shortSideValue, singleSize, multipleSize)}}">
+            <image class="{{album.dim(isLong, index, maxNumber, previewFullImage)}}}" id='{{index}}' bind:tap="onPreviewTap" style="{{album.blockStyle(urls, horizontalScreen, shortSideValue, singleSize, multipleSize)}}" src="{{newType?item[key]:item}}" mode="{{urls.length === 1?singleMode:multipleMode}}" />
+            <view wx:if="{{album.image(isLong, index, maxNumber, previewFullImage)}}" class="text">+{{urls.length-maxNumber}}</view>
+        </view>
     </block>
 </view>
diff --git a/examples/dist/album/index.wxs b/examples/dist/album/index.wxs
@@ -1,5 +1,4 @@
 var containerStyle = function (urls, multipleSize, gapRow, gapColumn) {
-    urls.length === 2 || urls.length === 4 ? 'width:' + (2 * multipleSize + gapRow) + 'rpx;' : 'width:' + (3 * multipleSize + 2 * gapRow) + 'rpx;'
     if (urls.length === 2 || urls.length === 4) {
         return 'width:' + (2 * multipleSize + gapRow) + 'rpx; grid-row-gap:' + gapColumn + 'rpx; grid-column-gap:' + gapRow + 'rpx;grid-template-columns:repeat(auto-fit, ' + multipleSize + 'rpx);'
     } else {
@@ -32,8 +31,49 @@ var blockStyle = function (urls, horizontalScreen, shortSideValue, singleSize, m
     }
 }
 
+var gridStyle = function (gapRow, gapColumn, multipleSize, everyRowNumber) {
+    return 'display:inline-grid;grid-template-columns: repeat(' + everyRowNumber + ',' + multipleSize + 'rpx);grid-row-gap:' + gapRow + 'rpx;grid-column-gap:' + gapColumn + 'rpx;'
+}
+
+var dimBack = function (isLong, index, maxNumber, previewFullImage) {
+    if (previewFullImage) {
+        if (isLong) {
+            if (index == maxNumber - 1) {
+                return 'dimback'
+            }
+        }
+    }
+    return ''
+}
+
+var dim = function (isLong, index, maxNumber, previewFullImage) {
+    if (previewFullImage) {
+        if (isLong) {
+            if (index == maxNumber - 1) {
+                return 'dim'
+            }
+        }
+    }
+    return ''
+}
+
+var image = function (isLong, index, maxNumber, previewFullImage) {
+    if (previewFullImage) {
+        if (isLong) {
+            if (index == maxNumber - 1) {
+                return true
+            }
+        }
+    }
+    return false
+}
+
 module.exports = {
     containerStyle: containerStyle,
     blockClass: blockClass,
-    blockStyle: blockStyle
+    blockStyle: blockStyle,
+    gridStyle: gridStyle,
+    dimBack: dimBack,
+    dim: dim,
+    image: image,
 }
diff --git a/examples/dist/album/index.wxss b/examples/dist/album/index.wxss
@@ -1 +1 @@
-.container{display:grid}.vertical{height:360rpx}
+.container{display:grid}.vertical{height:360rpx}.parent{display:inline-grid;grid-template-columns:repeat(auto-fill)}.child{box-sizing:border-box;background-color:#fff;flex:0 0 44%;height:100px;border:1px solid red;margin-top:4%;margin-left:2%;margin-right:2%}.dimback{background:#000}.dim{opacity:.6}.imageContainer{position:relative}.imageContainer:last-child>.text{color:#fff;font-weight:700;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:larger}

Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		`-.container{display:grid}.vertical{height:360rpx}`
	`1`	`+.container{display:grid}.vertical{height:360rpx}.parent{display:inline-grid;grid-template-columns:repeat(auto-fill)}.child{box-sizing:border-box;background-color:#fff;flex:0 0 44%;height:100px;border:1px solid red;margin-top:4%;margin-left:2%;margin-right:2%}.dimback{background:#000}.dim{opacity:.6}.imageContainer{position:relative}.imageContainer:last-child>.text{color:#fff;font-weight:700;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:larger}`