1. 微信小程序开发文档指南
小程序开发指南: https://developers.weixin.qq.com/ebook?action=get_post_info&docid=0008aeea9a8978ab0086a685851c0a
2. Flex布局语法教程
https://www.runoob.com/w3cnote/flex-grammar.html?spm=a2c6h.13046898.publish-article.4.fcb46ffarw0mns
3. 代码实现过程
1.布局文件: index.wxml
<view class="grid-container">
<view class="grid-item ">
<image src="https://img1.baidu.com/it/u=4029400567,3042480412&fm=253&fmt=auto&app=138&f=JPEG?w=300&h=300" mode="aspectFill" />
<text>优花33枝红玫瑰</text>
<text>99</text>
</view>
<view class="grid-item ">
<image src="https://img1.baidu.com/it/u=3829932003,630069526&fm=253&fmt=auto&app=138&f=JPEG?w=394&h=371" mode="aspectFill" />
<text>优花33枝红玫瑰</text>
<text>99</text>
</view>
<view class="grid-item ">
<image src="https://img2.baidu.com/it/u=3779657532,3917549561&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" mode="aspectFill" />
<text>优花33枝红玫瑰</text>
<text>99</text>
</view>
<view class="grid-item ">
<image src="https://img1.baidu.com/it/u=1759993325,2084070182&fm=253&fmt=auto&app=138&f=PNG?w=498&h=500" mode="aspectFill" />
<text>优花33枝红玫瑰</text>
<text>99</text>
</view>
<view class="grid-item ">
<image src="https://img0.baidu.com/it/u=1675037441,1533461424&fm=253&fmt=auto&app=120&f=JPEG?w=300&h=300" mode="aspectFill" />
<text>优花33枝红玫瑰</text>
<text>99</text>
</view>
<view class="grid-item ">
<image src="https://img0.baidu.com/it/u=1281911112,1084861743&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" mode="aspectFill" />
<text>优花33枝红玫瑰</text>
<text>99</text>
</view>
</view>
- 样式文件:index.wsxx
/* 底部精选好品区域 */
.grid-container {
display: flex;
flex-wrap: wrap; /* flex-wrap: wrap 一行显示不下,自动换行 */
margin: 16rpx;
justify-content: space-between; /* space-between 元素两端对齐,剩余空间元素间隔都相等 */
}
.grid-item {
display: flex;
width: 32%;
flex-direction: column;
box-sizing: border-box;
margin-top: 16rpx;
}
.grid-item > image {
width: 100%;
height: 320rpx;
border-radius: 10rpx 10rpx 0 0;
}
温馨提示
grid-item的宽度设置为百分比,一行平分3等分,也就是33.33%,我这里设置32%,就是为了留一部分空白区域来巧妙设置间隔(配合justify-content: space-between,就可以实现间隔等分效果)
4. 运行效果
5. 动态列表渲染
在上面.wxml布局中,商品列表是通过view堆积起来的,在实际开发中,肯定也不能这样写死,列表数据应该是一个动态的
使用列表渲染来实现数据动态显示
- 官方文档
数据绑定:https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/data.html
列表渲染: https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/list.html
- 语法
wx:for
在组件上使用 wx:for 控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。
默认数组的当前项的下标变量名默认为 index
,数组当前项的变量名默认为 item
示例:
<view wx:for="{{array}}">
{{index}}: {{item.message}}
</view>
Page({
data: {
array: [{
message: 'foo',
},
{
message: 'bar'
}]
}
})
- 代码改造
index.wxml
<view class="grid-container">
<view class="grid-item " wx:for="{{excellentProduct}}" wx:key="*this">
<image src="{{item.posterUrl}}" mode="aspectFill" />
<text>{{item.title}}</text>
<text>{{item.price}}</text>
</view>
</view>
在index.js中模拟动态列表数据
// index.js
Page({
data: {
// 精选好评数据
excellentProduct: [
{ title: "优花33枝红玫瑰", posterUrl: "https://img1.baidu.com/it/u=4029400567,3042480412&fm=253&fmt=auto&app=138&f=JPEG?w=300&h=300", price: "199" },
{ title: "优花33枝红玫瑰", posterUrl: "https://img1.baidu.com/it/u=3829932003,630069526&fm=253&fmt=auto&app=138&f=JPEG?w=394&h=371", price: "69" },
{ title: "优花33枝红玫瑰", posterUrl: "https://img2.baidu.com/it/u=3779657532,3917549561&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500", price: "99" },
{ title: "优花33枝红玫瑰", posterUrl: "https://img1.baidu.com/it/u=1759993325,2084070182&fm=253&fmt=auto&app=138&f=PNG?w=498&h=500", price: "89" },
{ title: "优花33枝红玫瑰", posterUrl: "https://img0.baidu.com/it/u=1675037441,1533461424&fm=253&fmt=auto&app=120&f=JPEG?w=300&h=300", price: "49" },
{ title: "优花33枝红玫瑰", posterUrl: "https://img0.baidu.com/it/u=1281911112,1084861743&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500", price: "109" },
{ title: "优花33枝红玫瑰", posterUrl: "https://img1.baidu.com/it/u=4029400567,3042480412&fm=253&fmt=auto&app=138&f=JPEG?w=300&h=300", price: "199" },
{ title: "优花33枝红玫瑰", posterUrl: "https://img1.baidu.com/it/u=3829932003,630069526&fm=253&fmt=auto&app=138&f=JPEG?w=394&h=371", price: "69" },
{ title: "优花33枝红玫瑰", posterUrl: "https://img2.baidu.com/it/u=3779657532,3917549561&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500", price: "99" },
{ title: "优花33枝红玫瑰", posterUrl: "https://img1.baidu.com/it/u=1759993325,2084070182&fm=253&fmt=auto&app=138&f=PNG?w=498&h=500", price: "89" },
{ title: "优花33枝红玫瑰", posterUrl: "https://img0.baidu.com/it/u=1675037441,1533461424&fm=253&fmt=auto&app=120&f=JPEG?w=300&h=300", price: "49" },
{ title: "优花33枝红玫瑰", posterUrl: "https://img0.baidu.com/it/u=1281911112,1084861743&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500", price: "109" },
]
}
})