微信小程序限制每排显示 3条数据,超出自动换行(超详细)

我们先来看一下效果,这种方法任你实现每排显示条数

wxml

<scroll-view id="right" scroll-y="true" scroll-top="{{scrollTop}}" wx:if="{{screenId==1}}">
    <!--顶部图片-->
    <view class="goods-banner">
      <image class="img-banner" src="{{childrenArrayOne.showImageUrl}}" wx:if="{{childrenArrayOne.showImageUrl}}" mode="scaleToFill"></image>
    </view>
    <!--商品展示-->
    <view class="goods-list" wx:for="{{childrenArrayOne.childrenScreenArray}}" wx:key="unique">
      <view class="goods-title">{{item.screenName}}</view>
      <view class="com-list">
        <block wx:for="{{item.childrenScreenArray}}" wx:key="unique">
          <view class="goods" bindtap="toSearchResult" data-postname="{{item.screenName}}" >
            <image class="img" src="{{item.showImageUrl}}" wx:if="{{item.showImageUrl}}"></image>
            <text>{{item.screenName}}</text>
          </view>
        </block>
      </view>
    </view>
  </scroll-view>

.com-list {
  width: 560rpx;
  background: #fff;
  padding: 50rpx 50rpx 0;
  border-radius: 20rpx;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  flex-direction: row;
}
.goods{
  width:100rpx;
  font-size: 20rpx;
  text-align: center;
  margin-bottom: 50rpx;
  margin-right: 80rpx;
}
.goods:nth-child(3n) {
  margin-right: 0;
}

这里只显示了主要的css,如果想实现类似的分类效果,就看一下我另一篇博客吧

地址:    微信小程序高仿京东分类效果完整版(超详细)_青衫折扇的博客-CSDN博客_小程序仿京东