微信小程序带图九宫格代码
时间: 2023-10-04 17:13:21 浏览: 79
以下是一个简单的微信小程序带图九宫格代码示例:
1. 在 wxml 文件中添加以下代码:
```
<view class="grid">
<view wx:for="{{images}}" wx:key="{{index}}" class="grid-item">
<image src="{{item}}" mode="aspectFill"></image>
</view>
</view>
```
2. 在 wxss 文件中添加以下代码:
```
.grid {
display: flex;
flex-wrap: wrap;
padding: 10rpx;
}
.grid-item {
width: calc(33.33333% - 10rpx);
margin-right: 10rpx;
margin-bottom: 10rpx;
}
.grid-item:last-child {
margin-right: 0;
}
.image {
width: 100%;
height: 100%;
}
```
3. 在 js 文件中添加以下代码:
```
Page({
data: {
images: [
'https://example.com/image1.png',
'https://example.com/image2.png',
'https://example.com/image3.png',
'https://example.com/image4.png',
'https://example.com/image5.png',
'https://example.com/image6.png',
'https://example.com/image7.png',
'https://example.com/image8.png',
'https://example.com/image9.png',
],
},
})
```
这个代码会在页面上显示一个带有 9 张图片的九宫格。你可以根据需要调整图片和样式。