微信小程序多词组自动换行显示

有时候，我们会遇到上图一样的需求，要求是一个数组内有多个词组，让他们横向排列并且自动换行。具体实现代码如下：

<!-- wxml -->

<view class="view">
	<view class='list' wx:for="{{classifyArr}}" wx:key="key" >
		<view class='item' wx:for="{{item}}" wx:key="key">{{item}}</view>
	</view>
</view>

/**
 * wxss
 */

view {
  box-sizing: border-box;
}

.view {
  width: 750rpx;
  display: flex;
  flex-direction: column;
}

.list {
  width: 100%;
  padding: 20rpx 20rpx 0 20rpx;
  height: auto;
  margin: auto;
  column-count: auto;
}

.list:nth-child(2n) {
  background-color: #f1f1f1;
}

.list .item {
  font-size: 30rpx;
  width: auto;
  margin-right: 20rpx;
  padding-right: 20rpx;
  margin-bottom: 20rpx;
  float: left;
  color: #777;
  border-right: 1rpx solid #606366;
}

.list .item:last-child {
  border: none;
}

// js

Page({
  data: {
    classifyArr: [
      ['男士衬衫','男装秋冬','夏装','衬衣','外套','短袖','针织开衫','半袖','针织衫','冰丝t恤'],
      ['开衫','聚划算','半袖男','毛衣','supreme','工作服','休闲长裤','牛仔裤','男裤','短裤潮','短裤男潮','工装裤男','休闲裤','九分裤']
    ]
  },
  onLoad: function () {},
})

以上便是全部代码，实现的最终效果如下图所示：