微信小程序实现瀑布流布局

时间：2024-03-04 08:10:53

前言

最近在做微信小程序，有一个图片列表页面，想通过瀑布流方式来实现，个人比较喜欢这种效果

先看实现效果图

实现原理及代码

将布局分为两列，我们可以使用flex设置 displex:flex 然后每列宽度设置50%

<div class="photos">
      <ul class="list">
        <li class="list-item" v-for="(item,index) in list" :key="item" @click="detail(item)">
          <div class="item-content" v-if="index%2==0">
            <image class="avatar" :src="item.url" mode="widthFix"></image>
            <div v-text="item.name+index"></div>
          </div>
        </li>
      </ul>
      <ul class="list">
        <li class="list-item" v-for="(item,index) in list" :key="item" @click="detail(item)">
          <div class="item-content" v-if="index%2==1">
            <image class="avatar" :src="item.url" mode="widthFix"></image>
            <div v-text="item.name+index"></div>
          </div>
        </li>
      </ul>
    </div>

.photos {
    display: flex;
  }
  .list {
    width: 400rpx;
    .list-item {
      margin: 20rpx;
      .avatar {
        width: 100%;
      }
    }
  }

我们通过在每一列去遍历list数组使用if去判断是基数还是偶数来显示图片

v-if="index%2==0"

最后

以上就是实现瀑布流的方式，是不是很简单

参考阅读

https://www.cnblogs.com/sizhou/p/7219551.html

相关文章