小程序 商品列表自动换行的程序
时间: 2023-11-14 07:07:14 浏览: 23
你可以在小程序的 wxml 文件中使用 flex 布局来实现商品列表的自动换行。具体步骤如下:
1. 在 wxml 文件中创建一个父容器,设置其为 flex 布局,并且设置 flex-wrap 为 wrap,这样子元素就会自动换行。
```html
<view class="goods-list" style="display: flex; flex-wrap: wrap;">
<!-- 子元素 -->
</view>
```
2. 在父容器中添加子元素,每个子元素表示一个商品,设置子元素的宽度和高度,以及 margin 和 padding 等样式。
```html
<view class="goods-list" style="display: flex; flex-wrap: wrap;">
<!-- 子元素 -->
<view class="goods-item" style="width: 200rpx; height: 300rpx; margin: 10rpx; padding: 10rpx;">
<!-- 商品信息 -->
</view>
</view>
```
3. 如果你想让子元素自适应宽度,可以将子元素的宽度设置为百分比,例如设置为 33.33%。
```html
<view class="goods-list" style="display: flex; flex-wrap: wrap;">
<!-- 子元素 -->
<view class="goods-item" style="width: 33.33%; height: 300rpx; margin: 10rpx; padding: 10rpx;">
<!-- 商品信息 -->
</view>
</view>
```
这样子元素就会自动排列,并且自动换行。