1.0.7 • Published 3 years ago
gm-img-model v1.0.7
gm-img-model
css模拟展示3D
安装
npm install gm-img-model使用
- json
{
"usingComponents": {
"img-model": "gm-img-model/imgModel"
}
}- js
Page({
data: {
modelImgArr: [
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01EA9XRb1FJvZxHH5Yo_!!1080040467.png", "name": "盒子_1_0001.png", "width": "548", "height": "474" },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01c5dr3v1FJvZs4wZ45_!!1080040467.png", "name": "盒子_1_0002.png", "width": "547", "height": "474" },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN015Lfagt1FJvZyClC2e_!!1080040467.png", "name": "盒子_1_0003.png", "width": "547", "height": "474" },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01bquOQw1FJvZs4yZoc_!!1080040467.png", "name": "盒子_1_0004.png", "width": "547", "height": "474" },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01otxAPn1FJvZtZF6Ui_!!1080040467.png", "name": "盒子_1_0005.png", "width": "545", "height": "473" },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01ywIidX1FJvZs4yi8B_!!1080040467.png", "name": "盒子_1_0006.png", "width": "541", "height": "472" },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01bDnIsv1FJvZxHG9Nc_!!1080040467.png", "name": "盒子_1_0007.png", "width": "533", "height": "470" },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01sEk3T91FJvZxra6iB_!!1080040467.png", "name": "盒子_1_0008.png", "width": "523", "height": "467" },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01vys0S91FJvZxHHh0K_!!1080040467.png", "name": "盒子_1_0009.png", "width": "507", "height": "464" },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN018fCgxR1FJvZzdiUad_!!1080040467.png", "name": "盒子_1_0010.png", "width": "485", "height": "459" },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN019nXvw31FJvZxrXpLz_!!1080040467.png", "name": "盒子_1_0011.png", "width": "455", "height": "451" },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01zDvWc01FJvZw4rfud_!!1080040467.png", "name": "盒子_1_0012.png", "width": "458", "height": "443" },
{ "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01S2J1J51FJvZw4u9jv_!!1080040467.png", "name": "盒子_1_0013.png", "width": "457", "height": "444" },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01Dab2si1FJva0lMNjf_!!1080040467.png", "name": "盒子_1_0014.png", "width": "462", "height": "452" },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01rhQCDk1FJvZyznRUj_!!1080040467.png", "name": "盒子_1_0015.png", "width": "496", "height": "460" },
{ "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01g6ppBm1FJvZt4oDuR_!!1080040467.png", "name": "盒子_1_0016.png", "width": "522", "height": "467" },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01ZkQDrA1FJvZzdhp1h_!!1080040467.png", "name": "盒子_1_0017.png", "width": "540", "height": "472" },
{ "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01C2ERnm1FJva0RrUPn_!!1080040467.png", "name": "盒子_1_0018.png", "width": "547", "height": "474" },
{ "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN013FfxWB1FJvZt4pEF6_!!1080040467.png", "name": "盒子_1_0019.png", "width": "544", "height": "473" },
{ "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01LEzLkA1FJvZvBtzQO_!!1080040467.png", "name": "盒子_1_0020.png", "width": "532", "height": "470" },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01KidApB1FJvZvBsuvM_!!1080040467.png", "name": "盒子_1_0021.png", "width": "509", "height": "464" },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01xnDf2z1FJvZyCmfYE_!!1080040467.png", "name": "盒子_1_0022.png", "width": "475", "height": "456" },
{ "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01PVyNqv1FJva0lPT2s_!!1080040467.png", "name": "盒子_1_0023.png", "width": "455", "height": "446" },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01G1fmY81FJvZxHHI5Y_!!1080040467.png", "name": "盒子_1_0024.png", "width": "458", "height": "441" },
{ "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01k4ievM1FJvZnO3NWm_!!1080040467.png", "name": "盒子_1_0025.png", "width": "457", "height": "451" },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01iKh6GZ1FJvZvBujBb_!!1080040467.png", "name": "盒子_1_0026.png", "width": "492", "height": "460" },
{ "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01ufMawi1FJvZs4xhpR_!!1080040467.png", "name": "盒子_1_0027.png", "width": "519", "height": "467" },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01aPACWz1FJvZvY8Ogd_!!1080040467.png", "name": "盒子_1_0028.png", "width": "536", "height": "470" },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01QaZ8Ct1FJvZs4z78u_!!1080040467.png", "name": "盒子_1_0029.png", "width": "545", "height": "473" },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01V0D8te1FJva0lOnTX_!!1080040467.png", "name": "盒子_1_0030.png", "width": "548", "height": "474" },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01m7lyF91FJvZtZHNyz_!!1080040467.png", "name": "盒子_1_0031.png", "width": "545", "height": "473" },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN014cwkch1FJvZzdl6ll_!!1080040467.png", "name": "盒子_1_0032.png", "width": "534", "height": "470" },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN015WeCzJ1FJvZtZGurh_!!1080040467.png", "name": "盒子_1_0033.png", "width": "517", "height": "466" },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN010s2vrO1FJvZyCmXGm_!!1080040467.png", "name": "盒子_1_0034.png", "width": "491", "height": "459" },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01HiiXbF1FJvZxHJAW3_!!1080040467.png", "name": "盒子_1_0035.png", "width": "455", "height": "451" },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN015YDYob1FJvZxHI5zK_!!1080040467.png", "name": "盒子_1_0036.png", "width": "458", "height": "441" },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01ywg8Rb1FJvZxHHQS2_!!1080040467.png", "name": "盒子_1_0037.png", "width": "456", "height": "446" },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01hWaOi31FJvZxHJdcs_!!1080040467.png", "name": "盒子_1_0038.png", "width": "473", "height": "455" },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01RXkCbp1FJvZxHJlwI_!!1080040467.png", "name": "盒子_1_0039.png", "width": "505", "height": "463" },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01BbsmxH1FJvZw4tQ6r_!!1080040467.png", "name": "盒子_1_0040.png", "width": "529", "height": "469" },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN015mTPYY1FJvZvY7rSl_!!1080040467.png", "name": "盒子_1_0041.png", "width": "543", "height": "473" },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01iEt8wd1FJvZxHJddn_!!1080040467.png", "name": "盒子_1_0042.png", "width": "548", "height": "474" },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN0187PbMy1FJvZnO4Jo3_!!1080040467.png", "name": "盒子_1_0043.png", "width": "542", "height": "473" },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01wsCY9g1FJvZvXvV6y_!!1080040467.png", "name": "盒子_1_0044.png", "width": "529", "height": "469" },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01bO7VbB1FJvZnO4JoV_!!1080040467.png", "name": "盒子_1_0045.png", "width": "506", "height": "464" },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01kEJk1S1FJvZnO4Joh_!!1080040467.png", "name": "盒子_1_0046.png", "width": "477", "height": "456" },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01XdGmDD1FJvZwDCkOY_!!1080040467.png", "name": "盒子_1_0047.png", "width": "453", "height": "448" },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN011NEiii1FJvZs4ye70_!!1080040467.png", "name": "盒子_1_0048.png", "width": "458", "height": "439" },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01iNaZ261FJva0lOfES_!!1080040467.png", "name": "盒子_1_0049.png", "width": "454", "height": "446" },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01kyhF141FJvZs50SMs_!!1080040467.png", "name": "盒子_1_0050.png", "width": "468", "height": "454" },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01Gf14yQ1FJvZyznmNA_!!1080040467.png", "name": "盒子_1_0051.png", "width": "493", "height": "460" },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01eT0hea1FJva0lNK53_!!1080040467.png", "name": "盒子_1_0052.png", "width": "512", "height": "465" },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01zh9Q5x1FJva0RsUtK_!!1080040467.png", "name": "盒子_1_0053.png", "width": "526", "height": "469" },
{ "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01Grd8pI1FJvZyzmuNK_!!1080040467.png", "name": "盒子_1_0054.png", "width": "536", "height": "470" },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN012HBCJQ1FJvZwDDcSP_!!1080040467.png", "name": "盒子_1_0055.png", "width": "542", "height": "472" },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01dB0RWB1FJvZyznFAr_!!1080040467.png", "name": "盒子_1_0056.png", "width": "546", "height": "473" },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01WfkEkt1FJvZnO3z3t_!!1080040467.png", "name": "盒子_1_0057.png", "width": "547", "height": "474" },
{ "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01M5tHJO1FJvZxHKRaw_!!1080040467.png", "name": "盒子_1_0058.png", "width": "547", "height": "474" },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01OR1JxY1FJvZnO3JUu_!!1080040467.png", "name": "盒子_1_0059.png", "width": "547", "height": "474" },
{ "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01CZRuo81FJvZyzmhvv_!!1080040467.png", "name": "盒子_1_0060.png", "width": "548", "height": "474" }
],
},
onLoad() {
},
});- xaml
<!--
引用地方应该加一个容器，组件内部是直接绝对定位撑满上级position容器
tipImg: 提示图片，拖动一次就隐藏
-->
<img-model imgSource="{{modelImgArr}}" tipImg="{{tipImg}}"></img-model>