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

小鱼儿 2023-03-13 02:13 105阅读 0赞

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70][]

### **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,如果想实现类似的分类效果,就看一下我另一篇博客吧

地址:    [https://blog.csdn.net/qq\_42543264/article/details/105484681][https_blog.csdn.net_qq_42543264_article_details_105484681]

如果对你有帮助,加一下小编新建的交流群吧, QQ群: 1102727334

有什么问题都可以在群里问,一起学习解决各种疑难杂症

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70]: /images/20230312/46eb9e0e102b4336a85165013f2e8e60.png
[https_blog.csdn.net_qq_42543264_article_details_105484681]: https://blog.csdn.net/qq_42543264/article/details/105484681