关于小程序自定义 图片组合的模块
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;}
在页面中实现：