uniapp使用uview的u-tabs切换，u-waterfall和u-loadmore，瀑布流分页加载

 功能实现展示

在切换tab页时，下面的瀑布流和加载更多组件要同步更新

 具体实现

html

<template>
    <view>
		<!-- tab页 -->
		<view class="" style="margin: 10px;">
			<u-sticky >
				<u-tabs ref="uTabs" :list="tabTitles" :current="current" @change="change"> </u-tabs>
			</u-sticky>
		</view>
        
        <!-- 瀑布流 -->
		<view  style="margin: 10px;">
			<u-waterfall v-model="flowList" ref="uWaterfall" >
				<template v-slot:left="{leftList}">
					<view class="demo-warter" v-for="(item, index) in leftList" :key="index" @click="goToDetail(item.id)">
						<u-lazy-load threshold="-450" border-radius="10" :image="item.image"
							:index="index"></u-lazy-load>
						<view class="demo-title">
							{{item.storeName}}
						</view>
						<view class="flex">
							<view class="demo-price">
								￥{{item.price}}
							</view>
							<view class="demo-sale">
								已售{{item.newFicti}}
							</view>
						</view>
					</view>
				</template>
				<template v-slot:right="{rightList}">
					<view class="demo-warter" v-for="(item, index) in rightList" :key="index" @click="goToDetail(item.id)">
						<u-lazy-load threshold="-450" border-radius="10" :image="item.image"
							:index="index"></u-lazy-load>
						<view class="demo-title">
							{{item.storeName}}
						</view>
						<view class="flex">
							<view class="demo-price">
								￥{{item.price}}
							</view>
							<view class="demo-sale">
								已售{{item.newFicti}}
							</view>
						</view>
					</view>
				</template>
			</u-waterfall>
		</view>
		
        <!-- 加载更多 -->
		<u-loadmore bg-color="rgb(240, 240, 240)" :status="loadStatus" @loadmore="loadTabProducts"></u-loadmore>
    </view>
</template>

数据定义

     data() {
			return {
				// tabs组件的current值，表示当前活动的tab选项
				current: 0,
                // 分页
				page: {
					num: 0,
					limit: 6
				},
				//tab数据列表
				tabTitles: [{
						name: '热卖',
						params: {
							isHot: 1
						}
					},
					{
						name: '优惠',
						params: {
							isBenefit: 1
						}
					},
					{
						name: '新品',
						params: {
							isNew: 1
						}
					},
					{
						name: '优品推荐',
						params: {
							isGood: 1
						}
					},
					{
						name: '精品',
						params: {
							isBest: 1
						}
					},
				],
				// 商品列表
				tabListProducts: [],
				// 判断是否触底的时候还需要刷新
				moreStatus: true,
				// 瀑布流数据
				flowList: [],
				// 加载更多状态
				loadStatus: 'loadmore',
			}
		},

js

async onLoad() {
	this.getCateNavs();
	this.loadTabProducts();
},
onReachBottom() {
	// 如果依然还有数据，就触发
	if (this.moreStatus == true) {
		this.loadStatus = 'loading';
		setTimeout(() => {
			this.loadTabProducts(this.current);
			this.loadStatus = 'loadmore';
		}, 500)
	}
},

methods: {
    /* 加载tab页商品 */
	loadTabProducts(index = 0) {
		this.page.num++;
		const params = {
			...this.tabTitles[index].params,
			pageNum: this.page.num,
			pageSize: this.page.limit
		};
		getAvailableProducts(params).then(res => {
			let resData = res.rows
			resData.forEach(ele => {
				if (!this.regex.test(ele.image)) {
					ele.image = config.baseUrl + ele.image;
				}
				ele.newFicti = bigNumberTransform(ele.ficti)
			})
			// 拼接数组
			this.flowList = this.flowList.concat(resData)
			// 如果数组为空，或者已经请求完毕，更改更多加载的状态
			if (resData.length == 0 || res.total <= this.flowList.length) {
				this.moreStatus = false
				this.loadStatus = 'nomore';
			}
		})
    }，

    /* 点击商品跳转详情页 */
	goToDetail(id){
		uni.navigateTo({
			url: '/subPackages/product/detail'
		})
		uni.setStorageSync('product_id', id)
	},

	/* 点击tab标签 */
	change(index) {
		this.current = index;
		this.page.num = 0;
        this.$refs.uWaterfall.clear();
        this.loadStatus = 'loadmore';
        this.moreStatus = true
		this.loadTabProducts(index);
	},

	/* 返回顶部的事件 */
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	}
}