uniapp小程序实现瀑布流布局的思路与代码

接下来我将分享"uniapp小程序实现瀑布流布局的思路与代码"的完整攻略。

概述

瀑布流布局是一种经典的UI设计风格，它可以让页面更加美观且易于阅读。在uni-app小程序中实现瀑布流布局并不难，我们可以利用uni-app对flex布局的支持来完成。本文将介绍如何使用flex布局实现瀑布流布局。

实现方法

创建一个包含多个子元素的容器，每个子元素中包含一张图片和对应的描述信息。
利用flex布局对容器进行排列，将子元素的高度设置为auto，宽度为固定值。
设置flex-wrap为wrap，这样容器会自动折行显示，形成瀑布流布局。

除此之外，还可以添加一些图片懒加载和滚动到底部自动加载的功能，以提高用户体验。

以下是示例代码演示：

<template>
  <view class="container">
    <view v-for="(item, index) in list" :key="index" class="item">
      <img :src="item.src" :alt="item.title" />
      <p>{{ item.title }}</p>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          src:
            "https://cdn.pixabay.com/photo/2019/12/05/20/00/winter-4670833_960_720.jpg",
          title: "Winter",
        },
        {
          src:
            "https://cdn.pixabay.com/photo/2019/11/02/20/03/elephant-4591849_960_720.jpg",
          title: "Elephant",
        },
        {
          src:
            "https://cdn.pixabay.com/photo/2019/11/18/19/43/beach-4630389_960_720.jpg",
          title: "Beach",
        },
      ],
    };
  },
};
</script>

<style>
.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.item {
  margin-top: 10px;
  width: calc(33.33% - 10px);
  display: flex;
  flex-direction: column;
  align-items: center;
}

img {
  width: 100%;
}

p {
  margin: 5px 0 0 0;
  font-size: 16px;
  color: #333;
  text-align: center;
}
</style>

在示例代码中，我们首先创建了一个名为container的容器元素，然后在其中插入多个名为item的子元素，每个子元素包含一张图片和对应的标题信息。

接着，我们在样式表中对container进行了flex布局，并将flex-wrap属性设置为wrap，这样容器就可以自动折行成为瀑布流布局。

对于item元素，我们设置了固定宽度、自适应高度，利用justify-content: space-between将元素尽可能平均分配到各行中。图片的宽度设置为100%以保证其适应父元素宽度，标题信息使用了一些简单的排版设置。

除此之外，我们还可以为页面添加一些滚动事件和懒加载功能，以提高用户体验。

示例演示

以下是另一个实现瀑布流布局的示例代码，它可以从服务器获取一组图片数据并动态渲染到页面中。在滚动到底部时会自动加载更多数据，同时还可以对图片进行懒加载。示例代码如下：

<template>
  <view class="container">
    <view v-for="(item, index) in list" :key="index" class="item">
      <img :src="item.src" :alt="item.title" v-lazy="item.src" />
      <p>{{ item.title }}</p>
    </view>
    <view v-if="loading" class="loading">Loading...</view>
  </view>
</template>

<script>
import { request } from "@/utils/request";

export default {
  data() {
    return {
      page: 1,
      limit: 30,
      list: [],
      loading: false,
    };
  },
  mounted() {
    this.loadData();
  },
  methods: {
    async loadData() {
      if (this.loading) return;
      this.loading = true;
      const res = await request({
        url: "/api/getList",
        method: "get",
        data: { page: this.page, limit: this.limit },
      });
      if (res && res.code === 0) {
        this.list = [...this.list, ...res.data.list];
        this.page++;
      }
      this.loading = false;
    },
    scrollToLower() {
      this.loadData();
    },
  },
};
</script>

<style>
.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.item {
  margin-top: 10px;
  width: calc(33.33% - 10px);
  display: flex;
  flex-direction: column;
  align-items: center;
}

img {
  width: 100%;
}

p {
  margin: 5px 0 0 0;
  font-size: 16px;
  color: #333;
  text-align: center;
}

.loading {
  margin-top: 10px;
  text-align: center;
}
</style>

在该示例代码中，我们使用了一个名为request的工具函数来向服务器请求数据。数据获取成功后，我们将其保存在list数组中，并在滚动到页面底部时自动调用loadData方法从服务器中加载更多数据。

在样式表中，我们设置了.loading类的样式，以便在请求数据时显示加载提示。

最后需要注意的是，在使用图片懒加载时，需要在页面中引入第三方插件uni/image-lazy-load，并对图片元素添加v-lazy属性，具体可参考该插件文档。