图片画廊组件渲染、热区位置优化

static/nativeComponents/PhotoGallery/index.js

@@ -94,6 +94,7 @@ Component({
     },
     bindload(e) {
       let { imgList } = this.data;
+      const {style} = this.data.datas.componentData;
       console.log(e,'宽高')
       let _this = this;
       let index = e.currentTarget.dataset.index;
@@ -105,12 +106,12 @@ Component({
       this.setData({
         lenI : this.data.lenI + 1
       })
-
+      // 默认模式
       this.setData({
         ['imgArr[' + index + '].width']: width,
         ['imgArr[' + index + '].height']: height
       })
-
+      // 平铺模式
       if (this.data.lenI == this.data.datas.componentData.imgList.length){
           let countWidth = 0;
           this.data.imgArr.forEach(item => {
@@ -123,16 +124,24 @@ Component({
 
         let getPaddingListLeft = this.data.getPaddingList[2].value;
         let getPaddingListRight = this.data.getPaddingList[3].value;
-        console.log(getPaddingListLeft,getPaddingListRight,'---getPaddingListRight')
-        let b = countWidth / (res.windowWidth - getPaddingListLeft - getPaddingListRight)
-
-        console.log(b,'nnnnn')
+        const fillWidth = res.windowWidth - getPaddingListLeft - getPaddingListRight;
+        let b = countWidth / fillWidth;
+        console.log('fillWidth', fillWidth, b);
         this.data.imgArr.forEach((it,ii) => {
           console.log(it.width / b,Math.ceil(it.width / b),'---Math.ceil(it.width / b)')
-          this.setData({
-            ['imgArr[' + ii + '].width']: it.width / b ,
-            ['imgArr[' + ii + '].height']: it.height /b
-          })
+          if (['tiled'].indexOf(style) > -1) {
+            // 平铺
+            this.setData({
+              ['imgArr[' + ii + '].width']: Math.round(it.width / b) ,
+              ['imgArr[' + ii + '].height']: Math.round(it.height /b)
+            })
+          } else if (['list', 'across'].indexOf(style) > -1) {
+            // 列表、横向滑动
+            this.setData({
+              ['imgArr[' + ii + '].width']: Math.round(fillWidth),
+              ['imgArr[' + ii + '].height']: Math.round(Math.round(fillWidth) / it.width * it.height)
+            })
+          }
         })
         this.setData({
           showImg: true,
@@ -144,7 +153,7 @@ Component({
         .boundingClientRect(rect => {
           rect && rect.map((item, index) => {
             Math.ceil(item.width);
-            console.log('imgBox-width', Math.ceil(item.width));
+            console.log('imgBox-width', item, imgList[index]);
             let ratio = Math.ceil(item.width) / imgList[index].imgWidth;
             console.log('ratio', ratio)
             imgList[index].hotList && imgList[index].hotList.forEach((item1, index1) => {

static/nativeComponents/PhotoGallery/index.wxml

@@ -5,8 +5,8 @@
   </view>
   <view wx:if="{{datas.componentData.style==='list'}}">
     <view class="imgcontent imgBox" bindtap="itemClick" data-item="{{item}}" wx:for="{{imgList}}"  wx:key="index" style="margin-bottom:{{datas.componentData.imgPadding * 2}}rpx">
-      <view class="hotZone" bindtap="itemClick" wx:for="{{item.hotList}}"  wx:key="index1" wx:for-item="item1" wx:for-index="index1" data-item="{{item1}}" style="width: {{item1.renderWidth}}px;height: {{item1.renderHeight}}px;top: {{item1.renderTop}}rpx;left: {{item1.renderLeft}}px;"></view>
-      <image bindload="bindload" data-index="{{index}}" src="{{item.imageUrl}}" mode="widthFix" style="border-radius:{{2*(datas.componentData['radius']/100)}}em"></image>
+      <view class="hotZone" bindtap="itemClick" wx:for="{{item.hotList}}"  wx:key="index1" wx:for-item="item1" wx:for-index="index1" data-item="{{item1}}" style="width: {{item1.renderWidth}}px;height: {{item1.renderHeight}}px;top: {{item1.renderTop}}px;left: {{item1.renderLeft}}px;"></view>
+      <image bindload="bindload" data-index="{{index}}" src="{{item.imageUrl}}" style="border-radius:{{2*(datas.componentData['radius']/100)}}em;width:{{imgArr[index].width}}px;height:{{ imgArr[index].height }}px"></image>
     </view>
   </view>
   <view wx:elif="{{datas.componentData.style==='across' || datas.componentData.style==='tiled'}}" class="across">
@@ -18,8 +18,8 @@
     </view>
     <view style="display:{{datas.componentData.style==='tiled' ? 'flex' : ''}}" class="ul {{datas.componentData.style==='tiled'?'isTiled':''}} {{showImg ? 'show': 'hide'}}">
       <view bindtap="itemClick" data-item="{{item}}" wx:for="{{imgList}}" wx:key="index" style="margin-right:{{index===(imgList.length-1)? '' : datas.componentData.imgPadding * 2 + 'rpx'}};width:{{datas.componentData.style==='across' ? datas.componentData.acrossPer+'%' : ''}}" class="li imgBox">
-        <view class="hotZone" bindtap="itemClick" wx:for="{{item.hotList}}"  wx:key="index1" wx:for-item="item1" wx:for-index="index1" data-item="{{item1}}" style="width: {{item1.renderWidth}}px;height: {{item1.renderHeight}}px;top: {{item1.renderTop}}rpx;left: {{item1.renderLeft}}px;"></view>
-        <image src="{{item.imageUrl}}" style="border-radius:{{2*(datas.componentData['radius']/100)}}em;width:{{datas.componentData.style==='tiled' ? imgArr[index].width : ''}}px;height:{{ datas.componentData.style==='tiled' ? imgArr[index].height : ''}}px" bindload="bindload" data-index="{{index}}" mode="{{datas.componentData.style==='across' ? 'widthFix' : ''}}"></image>
+        <view class="hotZone" bindtap="itemClick" wx:for="{{item.hotList}}"  wx:key="index1" wx:for-item="item1" wx:for-index="index1" data-item="{{item1}}" style="width: {{item1.renderWidth}}px;height: {{item1.renderHeight}}px;top: {{item1.renderTop}}px;left: {{item1.renderLeft}}px;"></view>
+        <image src="{{item.imageUrl}}" style="border-radius:{{2*(datas.componentData['radius']/100)}}em;width:{{imgArr[index].width}}px;height:{{ imgArr[index].height }}px" bindload="bindload" data-index="{{index}}"></image>
       </view>
     </view>
   </view>