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

前言

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

先看实现效果图

实现原理及代码

将布局分为两列，我们可以使用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

巴特西

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

前言

实现原理及代码

最后

参考阅读

最新文章

热门文章