直接上代碼：
grid_com.js
/**
* 組件的屬性列表
*/
properties: {
showImgs: {
type: Array,
value: [
"/images/mall_swiper_banner.jpg",
"/images/mall_swiper_banner.jpg",
"/images/mall_swiper_banner.jpg",
"/images/mall_swiper_banner.jpg",
"/images/mall_swiper_banner.jpg",
"/images/mall_swiper_banner.jpg"
]
}
},
grid_com.wxml
<view class="grid-outer">
<block wx:for="{{showImgs}}" wx:key="{{index}}">
<view class="grid-container">
<view class="grid-container-item" data-url="{{item}}" bindtap="showImgAction"></view>
</view>
</block>
</view>
grid_com.wxss
.grid-outer {
display: flex;
flex-direction: row;
/* 自動換行 */
flex-wrap: wrap;
width: 690rpx;
}
.grid-container {
width: 230rpx;
height: 210rpx;
margin: 0 0 20rpx 0;
background: transparent;
display: flex;
justify-content: center;
align-items: center;
}
.grid-container-item {
width: 210rpx;
height: 210rpx;
background: #f8f8f8;
}
組件使用：
.json
{
"usingComponents": {
"Grid_com": "/components/grid_com/grid_com"
},
}
.wxml
<Grid_com />
效果圖：
