热区点击

static/nativeComponents/PhotoGallery/index.js

@@ -32,6 +32,7 @@ Component({
     }
     ],
     imgArr : [],
+    imgList: [],
     lenI : 0,
     WaterfallFlowListL : [],
     WaterfallFlowListR: [],
@@ -40,7 +41,8 @@ Component({
   ready(){
     if (this.data.datas.componentData.paddingList){
       this.setData({
-        getPaddingList: this.data.datas.componentData.paddingList
+        getPaddingList: this.data.datas.componentData.paddingList,
+        imgList: this.data.datas.componentData.imgList
       })
     }
     console.log(this.data.getPaddingList[2],this.data.getPaddingList[3],'--------------------45')
@@ -90,9 +92,10 @@ Component({
       app.trackCpn(e, this.data.datas.componentName, item)
       app.$themeToLink(item.link)
     },
-    bindload(e){
+    bindload(e) {
+      let { imgList } = this.data;
       console.log(e,'宽高')
-
+      let _this = this;
       let index = e.currentTarget.dataset.index;
       let width = e.detail.width
       let height = e.detail.height
@@ -135,7 +138,28 @@ Component({
           showImg: true,
         })
       }
-
+      let query = wx.createSelectorQuery().in(this);
+      query
+        .selectAll(".imgBox")
+        .boundingClientRect(rect => {
+          rect && rect.map((item, index) => {
+            Math.ceil(item.width);
+            console.log('imgBox-width', Math.ceil(item.width));
+            let ratio = Math.ceil(item.width) / imgList[index].imgWidth;
+            console.log('ratio', ratio)
+            imgList[index].hotList && imgList[index].hotList.forEach((item1, index1) => {
+              item1.renderWidth = item1.width * ratio;
+              item1.renderHeight = item1.height * ratio;
+              item1.renderTop = item1.top * ratio;
+              item1.renderLeft = item1.left * ratio;
+            })
+            console.log('imgList', imgList)
+          })
+          _this.setData({
+            imgList,
+          })
+        })
+        .exec();
     }
   }
 })

static/nativeComponents/PhotoGallery/index.wxml

@@ -4,8 +4,9 @@
     {{datas.componentData.titles}}
   </view>
   <view wx:if="{{datas.componentData.style==='list'}}">
-    <view class="imgcontent" bindtap="itemClick" data-item="{{item}}" wx:for="{{datas.componentData.imgList}}"  wx:key="index" style="margin-bottom:{{datas.componentData.imgPadding * 2}}rpx">
-      <image src="{{item.imageUrl}}" mode="widthFix" style="border-radius:{{2*(datas.componentData['radius']/100)}}em"></image>
+    <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>
   </view>
   <view wx:elif="{{datas.componentData.style==='across' || datas.componentData.style==='tiled'}}" class="across">
@@ -16,20 +17,21 @@
       <i class="iconfont-common common-iconyoujiantou"></i>
     </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="{{datas.componentData.imgList}}" wx:key="index" style="margin-right:{{index===(datas.componentData.imgList.length-1)? '' : datas.componentData.imgPadding * 2 + 'rpx'}};width:{{datas.componentData.style==='across' ? datas.componentData.acrossPer+'%' : ''}}" class="li">
+      <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>
     </view>
   </view>
   <view wx:elif="{{datas.componentData.style==='waterfall'}}" class="waterfall">
     <view class="waterfall-l">
-      <view  bindtap="itemClick" data-item="{{item}}" wx:for="{{WaterfallFlowListL}}" :wx:key="index" class="item">
-        <image src="{{item.imageUrl}}" mode="widthFix" style="border-radius:{{2*(datas.componentData['radius']/100)}}em"></image>
+      <view  bindtap="itemClick" data-item="{{item}}" wx:for="{{WaterfallFlowListL}}" :wx:key="index" class="item imgBox">
+        <image bindload="bindload" data-index="{{index}}" src="{{item.imageUrl}}" mode="widthFix" style="border-radius:{{2*(datas.componentData['radius']/100)}}em"></image>
       </view>
     </view>
     <view class="waterfall-r">
-      <view  bindtap="itemClick" data-item="{{item}}" wx:for="{{WaterfallFlowListR}}" :wx:key="index" class="item">
-        <image src="{{item.imageUrl}}" mode="widthFix" style="border-radius:{{2*(datas.componentData['radius']/100)}}em"></image>
+      <view  bindtap="itemClick" data-item="{{item}}" wx:for="{{WaterfallFlowListR}}" :wx:key="index" class="item imgBox">
+        <image bindload="bindload" data-index="{{index}}" src="{{item.imageUrl}}" mode="widthFix" style="border-radius:{{2*(datas.componentData['radius']/100)}}em"></image>
       </view>
     </view>
   </view>

static/nativeComponents/PhotoGallery/index.wxss

@@ -4,6 +4,13 @@
   width: 100%;
   height: auto;
 }
+.hotZone{
+  position: absolute;
+  /* background: #666; */
+}
+.imgBox{
+  position: relative;
+}
 .photo-gallery{
   width: 100%;
   font-size: 32rpx;
@@ -22,6 +29,7 @@
 .imgcontent{
   width: 100%;
   text-align: center;
+  position: relative;
 }
 .imgcontent image{
   width: 100%;