The waterfall waterfall flow of uview realizes single column and loads more

That's according to a uView Of Waterfall Waterfall flow to change , The original components are left and right columns , This change is mainly the pagination of the list , Combined with the official documents and this article, we can achieve

Change to single data , The original components are left and right

Find the component in the root directory and change it
uview-ui/components/u-waterfall/u-waterfall.vue

• Add your own definition in the middle all

<template>
	<view class="u-waterfall">
		<view id="u-left-column" class="u-column"><slot name="left" :leftList="leftList"></slot></view>
		<view id="u-right-column" class="u-column"><slot name="right" :rightList="rightList"></slot></view>
		//  Self defined single column 
		<view id="u-all-column" class="u-column u-all"><slot name="all" :allList="allList"></slot></view>
	</view>
</template>

• splitData You can change it next time

async splitData() {
    
	if (!this.tempList.length) return;
	let leftRect = await this.$uGetRect('#u-left-column');
	let rightRect = await this.$uGetRect('#u-right-column');
	let allRect = await this.$uGetRect('#u-all-column');  // obtain id
      
    if(!item) return ;

	this.allList.push(item); // Splice the arrays together 
		
 },

• clear Add

//  Clear the data list 
clear() {
    
	this.leftList = [];
	this.rightList = [];
	this.allList = []
	//  At the same time, clear the data in the parent component list 
	this.$emit('input', []);
	this.tempList = [];
},

• style

.u-all{
    
	flex: unset !important;
        width: 100%;

}

Use on page

<template>
	<view>
		
		<u-waterfall v-model="activeList" ref="uWaterfall">
		
			<template v-slot:all="{allList}">
				<view class="learnList">
					<view class="item" v-for="(item,index) in allList" :key="index" @click="info(item)">
						<text>{
   {item.noticeTitle}}</text>
					</view>
				</view>
			</template>
			
		</u-waterfall>
		
		<u-loadmore bg-color="#fff" :status="loadStatus" @loadmore="getActiveList()"></u-loadmore>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				active: 0,
				
				activeList: [],
				loadStatus: 'loadmore', 
				//  Pagination 
				page: {
					num: 0,
					limit: 10
				},
				moreStatus: true, //  It also needs to refresh when judging whether it hits the bottom 
				
			};
		},
		onLoad() {
			this.getActiveList()
		},
		onReachBottom() {
			//  If there are still data , Just set out 
			if (this.moreStatus == true) {
				this.loadStatus = 'loading';
				//  Analog data loading 
				setTimeout(() => {
					this.getActiveList();
					this.loadStatus = 'loadmore';
				}, 1000)
			}
		
		},
		methods: {
			select(index) {
				this.active = index;
				//  With tabs 
				this.page.num = 0;
				this.$refs.uWaterfall.clear();
				this.moreStatus = true
				this.loadStatus = 'loadmore';
				this.getActiveList()
			},
			getActiveList() {
				this.page.num++;
				this.$u.get("/system/notice/list", {
					noticeType: this.tabCate[this.active].id,
					pageNum: this.page.num,
					pageSize: this.page.limit
				}).then(res => {
					if (res.code == 200) {
						
						let resData = res.rows
						
						//  Mosaic array 
						this.activeList = this.activeList.concat(resData)
						
						//  If the array is empty , Or the request has been completed , Change the status of more loads 
						if (resData.length == 0 || res.total <= this.activeList.length) {
							this.moreStatus = false
							this.loadStatus = 'nomore';
						}
						
					}
				})
			},
		
		}
	}
</script>

<style lang="scss">
	
</style>

• Customize uView The components of , Easy to use , The main reason is that it has high reusability
• Although the style looks simple , But overall , A medium-sized project , Very practical