不喜勿喷，非常感谢
准备数据：首先，你需要有一些数据，这些数据将会在瀑布流中渲染。你可以将这些数据存储在一个数组中，或者从服务器请求获取。
创建页面：在UniApp中创建一个页面，用于展示纵向瀑布流。可以使用<scroll-view>组件来创建一个垂直滚动的视图容器，以便展示瀑布流。
<template> <view> <scroll-view class="waterfall-container" :scroll-y="true" :lower-threshold="50" @scrolltolower="loadMoreData"> <view class="waterfall-item" v-for="(item, index) in itemList" :key="index"> <!-- 渲染每个瀑布流元素的内容 --> {{ item.content }} </view> </scroll-view> </view> </template>
渲染瀑布流：使用v-for指令或者<template>标签来循环渲染数据，生成瀑布流中的每个元素。为了实现纵向瀑布流，通常需要设置合适的样式，例如使用CSS的column-count属性来控制列数。
<style scoped> .waterfall-container { column-count: 2; /* 设置列数 */ column-gap: 10px; /* 设置列之间的间隔 */ } .waterfall-item { break-inside: avoid; /* 防止元素跨列 */ margin-bottom: 10px; /* 设置元素之间的垂直间隔 */ } </style>
上拉加载数据：要实现动态上拉加载数据，可以监听scrolltolower事件，当用户滚动到页面底部时，触发加载更多数据的操作。
<script> export default { data() { return { itemList: [], // 存储瀑布流数据 page: 1, // 当前加载的页数 }; }, methods: { // 加载更多数据 loadMoreData() { // 发起异步请求，获取更多数据 // 可以使用uni.request或其他方法来获取数据 // 将新数据追加到itemList中 // 更新页数 // 示例：假设使用uni.request请求数据 uni.request({ url: 'your_api_endpoint', data: { page: this.page + 1, }, success: (res) => { if (res.data && res.data.length > 0) { this.itemList = this.itemList.concat(res.data); this.page++; } else { // 没有更多数据了，可以禁用上拉加载 } }, }); }, }, mounted() { // 页面加载时，初始化数据 this.loadMoreData(); }, }; </script>
loadMoreData方法用于加载更多数据，当滚动到页面底部时，通过监听scrolltolower事件触发加载更多数据的操作。每次加载后，更新page页数，确保加载下一页的数据。
不喜勿喷，非常感谢
