微信小程序分列展示
时间: 2023-06-21 07:06:33 浏览: 109
微信小程序中可以通过使用 `wx:for` 和 `wx:for-item` 属性来实现分列展示。具体步骤如下:
1. 在 wxml 文件中定义一个 `view` 容器,设置 `flex-wrap` 属性为 `wrap`,表示自动换行。例如:
```html
<view class="container" style="display:flex;flex-wrap:wrap;">
</view>
```
2. 在 js 文件中定义一个数组对象,用于存储需要展示的数据。
3. 在 wxml 文件中使用 `wx:for` 和 `wx:for-item` 属性,将数据渲染到页面上。例如:
```html
<view class="item" wx:for="{{dataList}}" wx:for-item="item">
<image src="{{item.imgUrl}}" mode="aspectFill"></image>
<text>{{item.title}}</text>
</view>
```
4. 在样式文件中定义 `.item` 类名的样式,设置 `width` 属性为百分比,实现分列展示。例如:
```css
.item {
width: 50%;
padding: 10rpx;
box-sizing: border-box;
}
```
上述代码将展示的数据分为两列显示,每一项的宽度为父元素的一半。可以根据需要设置更多的列数,只需将 `width` 属性的值调整为百分比即可。