美文网首页
手动瀑布流flex

手动瀑布流flex

作者: 浪浪山小妖_ | 来源:发表于2019-12-12 17:58 被阅读0次

    1.顾名思义,手动分成固定N列,每列向下排列

    html部分

              <view class='discussList-main'>
                <!-- 手动瀑布流 :) -->
                <view class='discussList'>
                  <block wx:for="{{discussList}}" wx:key="index" wx:if="{{index%2 ==0}}">
                    <view class="discuss">
                      <discuss-pane item="{{item}}" starNum="{{item.star}}}" bind:preView="preView"
                        wx:if="{{currentList=='discuss'}}">
                      </discuss-pane>
                    </view>
                  </block>
                </view>
                <view class='discussList'>
                    <block wx:for="{{discussList}}" wx:key="index" wx:if="{{index%2 !=0}}">
                      <view class="discuss">
                        <discuss-pane item="{{item}}" starNum="{{item.star}}}" bind:preView="preView"
                          wx:if="{{currentList=='discuss'}}">
                        </discuss-pane>
                      </view>
                    </block>
                  </view>
              </view>
    

    css部分

    
    /* 评论start */
    .discussList-main {
      display: flex;
      /* flex-flow: row wrap; */
      padding: 40rpx;
      padding-top: 0;
      justify-content: space-between;
    }
    
    .discussList-main .discussList { 
      display: flex;
      flex-flow: column wrap;
    }
    .discussList-main .discussList .discuss{
      width:325rpx;
    }
    /* 评论end */
    

    --by Affandi ⊙▽⊙

    相关文章

      网友评论

          本文标题:手动瀑布流flex

          本文链接:https://www.haomeiwen.com/subject/ffitnctx.html