美文网首页
手动瀑布流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