关于小程序自定义 图片组合的模块

var picdata = [{"fir": {"x": "0","y": "0"},"x_span": 2,"y_span": 3,"url": "pages\/index\/index\/index",

"urltitle": "\u5546\u57ce\u9996\u9875",

"src": "https:\/\/mshopimg.yolipai.net\/public\/upload\/wechat\/ppt\/2019\/04-12\/e62b41089d0f22ff9fadc5777e55b7c8.jpg",

"arr": [{"x": "0","y": "0"}, {"x": 1,"y": "0"}, {"x": "0","y": 1}, {"x": 1,"y": 1}, {"x": "0","y": 2}, {"x": 1,"y": 2}]

},

{"fir": {"x": "2","y": "0"},"x_span": 2,"y_span": 1,"url": "pages\/index\/index\/index",

"urltitle": "\u5546\u57ce\u9996\u9875",

"src": "https:\/\/mshopimg.yolipai.net\/public\/upload\/wechat\/ppt\/2019\/04-12\/4eeadbbd83fdd54d56da933e429e3cc8.jpg",

"arr": [{"x": "2","y": "0"}, {"x": 3,"y": "0"}]},

{"fir": {"x": "3","y": "1"},"x_span": 1,"y_span": 2,"url": "pages\/index\/index\/index",

"urltitle": "\u5546\u57ce\u9996\u9875",

"src": "https:\/\/mshopimg.yolipai.net\/public\/upload\/wechat\/ppt\/2019\/01-19\/67b1f3fdb75a59e70ec7d4f7b72afbb1.png",

"arr": [{"x": "3","y": "1"}, {"x": "3","y": 2}]

},

{"fir": {"x": "2","y": "1"},"x_span": 1,"y_span": 1,"url": "pages\/index\/index\/index",

"urltitle": "\u5546\u57ce\u9996\u9875",

"src": "https:\/\/mshopimg.yolipai.net\/public\/upload\/template\/ppt\/2018\/11-09\/6c2dd55ce7fe2c7a861366aa3130a0d5.jpg",

"arr": [{"x": "2","y": "1"}]

},

{"fir": {"x": "2","y": "2"},"x_span": 1,"y_span": 1,"url": "pages\/index\/index\/index",

"urltitle": "\u5546\u57ce\u9996\u9875",

"src": "https:\/\/mshopimg.yolipai.net\/public\/upload\/template\/ppt\/2018\/11-09\/3056e77f91fcca1837405d0357d998cf.jpg",

"arr": [{"x": "2","y": "2"}]

},

{"fir": {"x": "0","y": "3"},"x_span": 2,"y_span": 1,"url": "",

"urltitle": "\u8bf7\u9009\u62e9",

"src": "https:\/\/mshopimg.yolipai.net\/public\/upload\/template\/ppt\/2018\/11-09\/3056e77f91fcca1837405d0357d998cf.jpg",

"arr": [{"x": "0","y": "3"}, {"x": 1,"y": "3"}]

},

{"fir": {"x": "2","y": "3"},"x_span": 2,"y_span": 1,"url": "",

"urltitle": "\u8bf7\u9009\u62e9",

"src": "https:\/\/mshopimg.yolipai.net\/public\/upload\/template\/ppt\/2018\/10-09\/6abe891e5aabee664edd744ed87c7baf.jpg",

"arr": [{"x": "2","y": "3"}, {"x": 3,"y": "3"}]

}];

 

这个是json数据结构：

fir代表的左上角坐标 ，"x_span": 2,"y_span"代表长和高，src是图片，url是链接地址

.

小程序中定义好样式。每一个单位都是750rpx/4   就是187rpx

.picMax{width: 100%; padding: 0 10rpx;position: relative;}

.pic_item{position: absolute; top:0;left:0; background: #333}

.pic_item image{width: 100%; height: 100%}

width_1{width: 187rpx}.width_2{width: 374rpx;}.width_3{width: 561rpx}.width_4{width:748rpx;}

.height_1{height: 187rpx;}.height_2{height: 374rpx;}.height_3{height: 561rpx}.height_4{height: 748rpx;}

.mar_x1{margin-left:187rpx;}.mar_x2{margin-left:374rpx;}.mar_x3{margin-left:561rpx}.mar_x4{margin-left: 748rpx;}

.mar_y1{margin-top: 187rpx;}.mar_y2{margin-top: 374rpx;}.mar_y3{margin-top: 561rpx}.mar_y4{margin-top: 748rpx;}

 

在页面中实现：

<!--图片组合-->

<view class="picMax">

    <view wx:for="{{picMax_data}}" class="pic_item width_{{item.x_span}} height_{{item.y_span}} mar_x{{item.fir.x}} mar_y{{item.fir.y}}">

         <image bindtap='gopage' data-url="{{item.wxapp_url}}" src="{{item.src}}"></image>

   </view>

</view>