1.最终实现效果图

2.下载配置

https://v1.uviewui.com/components/downloadSetting.html

2.1 下载uView

下载地址：https://ext.dcloud.net.cn/plugin?id=6682

2.2 解压zip到Vue项目根目录

2.3 配置环境

2.3.1 引入uView引入JS库

在项目根目录中的main.js中，引入并使用uView的JS库，注意这两行要放在import Vue之后。

// main.js
import uView from "uview-ui";
Vue.use(uView);

2.3.2 引入uView的全局SCSS主题文件

在项目根目录的uni.scss中引入此文件。

/* uni.scss */
@import 'uview-ui/theme.scss';

2.3.3 引入uView基础样式

注意：在App.vue中首行的位置引入，注意给style标签加入lang="scss"属性

<style lang="scss">
	/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
	@import "uview-ui/index.scss";
</style>

2.3.4 配置easycom组件模式

此配置需要在项目根目录的pages.json中进行。

"easycom": {
"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
},

3. 代码实现

3.1 核心功能代码

<u-waterfall v-model="flowList">
	<template v-slot:left="{leftList}">
		<view v-for="(item, index) in leftList" :key="index">
			<!-- 这里编写您的内容，item为您传递给v-model的数组元素 -->
		</view>
	</template>
	<template v-slot:right="{rightList}">
		<view v-for="(item, index) in rightList" :key="index">
			<!-- 这里编写您的内容，item为您传递给v-model的数组元素 -->
		</view>
	</template>
</u-waterfall>

3.2 html框架

<!-- 瀑布流 -->
<view class="wrap">
  <u-waterfall v-model="goodsList" ref="uWaterfall">
    <template v-slot:left="{leftList}">
      <view class="demo-warter" v-for="item in leftList" :key="item.id">
        <!-- 这里编写内容，item为您传递给v-model的数组元素 -->
        <u-lazy-load threshold="-450" border-radius="10" :image="item.img" :index="index"></u-lazy-load>
        <view class="demo-title">{{item.name}}</view>
        <view class="demo-price">{{item.price * item.discount}}元</view>
        <view class="demo-tag">
          <view v-if="item.discount!==1" class="demo-tag-owner" style="margin-right: 20rpx;">
            限时折扣
          </view>
          <view class="demo-tag-owner">
            自营
          </view>
          <view class="demo-tag-text">
            放心购
          </view>
        </view>
        <view class="demo-shop">{{item.businessName}}</view>
      </view>
    </template>
    <template v-slot:right="{rightList}">
      <view  class="demo-warter" v-for="item in rightList" :key="item.id">
        <!-- 这里编写内容，item为您传递给v-model的数组元素 -->
        <u-lazy-load threshold="-450" border-radius="10" :image="item.img" :index="index"></u-lazy-load>
        <view class="demo-title">{{item.name}}</view>
        <view class="demo-price">{{item.price * item.discount}}元</view>
        <view class="demo-tag">
          <view class="demo-tag-owner">
            自营
          </view>
          <view class="demo-tag-text">
            放心购
          </view>
        </view>
        <view class="demo-shop">{{item.businessName}}</view>
      </view>
    </template>
  </u-waterfall>
  <u-loadmore bg-color="rgb(240, 240, 240)" :status="loadStatus" @loadmore="addRandomData"></u-loadmore>
</view>

3.3 css渲染

<style lang="scss" scoped>
/* 瀑布流 */
.demo-warter {
  border-radius: 8px;
  margin: 5px;
  background-color: #ffffff;
  padding: 8px;
  position: relative;
}
.u-close {
  position: absolute;
  top: 32rpx;
  right: 32rpx;
}
.demo-image {
  width: 100%;
  border-radius: 4px;
}
.demo-title {
  font-size: 30rpx;
  margin-top: 5px;
  color: $u-main-color;
}
.demo-tag {
  display: flex;
  margin-top: 5px;
}
.demo-tag-owner {
  background-color: #f5deb3;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  padding: 4rpx 14rpx;
  border-radius: 50rpx;
  font-size: 20rpx;
  line-height: 1;
}
.demo-tag-text {
  border: 1px solid $u-type-primary;
  color: $u-type-primary;
  margin-left: 10px;
  border-radius: 50rpx;
  line-height: 1;
  padding: 4rpx 14rpx;
  display: flex;
  align-items: center;
  border-radius: 50rpx;
  font-size: 20rpx;
}
.demo-price {
  font-size: 30rpx;
  color: $u-type-error;
  margin-top: 5px;
}
.demo-shop {
  font-size: 22rpx;
  color: $u-tips-color;
  margin-top: 5px;
}
</style>

3.4 js层获取数据

onReachBottom() {
    this.loadStatus = 'loading';
    // 模拟数据加载
    setTimeout(() => {
      this.loadStatus = 'nomore';
    }, 2000)
  },
methods: {
  loadGoods() {
    this.$request.get('/goods/selectAll', {status:'上架'}).then(res => {
      this.goodsList = res.data || []
      console.log(this.goodsList)
    })
  },
}