uView的Waterfall 瀑布流，实现单列，加载更多

这是根据uView的Waterfall 瀑布流来更改的，原组件是左右两列，本次更改主要是列表分页展示，结合官方文档以及此文章即可实现

更改为单个数据，原组件是左右

根目录下找到该组件进行更改 uview-ui/components/u-waterfall/u-waterfall.vue

在中间加入自己定义的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>
		// 自己定义的单列
		<view id="u-all-column" class="u-column u-all"><slot name="all" :allList="allList"></slot></view>
	</view>
</template>

splitData下更改即可

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);  //获取id
      
    if(!item) return ;

	this.allList.push(item); //将数组拼接上去
		
 },

clear也要加

// 清空数据列表
clear() {
          
   
	this.leftList = [];
	this.rightList = [];
	this.allList = []
	// 同时清除父组件列表中的数据
	this.$emit(input, []);
	this.tempList = [];
},

样式

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

}

页面上的使用

<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, 
				// 分页
				page: {
            
     
					num: 0,
					limit: 10
				},
				moreStatus: true, // 判断是否触底的时候还需要刷新
				
			};
		},
		onLoad() {
            
     
			this.getActiveList()
		},
		onReachBottom() {
            
     
			// 如果依然还有数据，就出发
			if (this.moreStatus == true) {
            
     
				this.loadStatus = loading;
				// 模拟数据加载
				setTimeout(() => {
            
     
					this.getActiveList();
					this.loadStatus = loadmore;
				}, 1000)
			}
		
		},
		methods: {
            
     
			select(index) {
            
     
				this.active = index;
				// 有选项卡的情况
				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
						
						// 拼接数组
						this.activeList = this.activeList.concat(resData)
						
						// 如果数组为空，或者已经请求完毕，更改更多加载的状态
						if (resData.length == 0 || res.total <= this.activeList.length) {
            
     
							this.moreStatus = false
							this.loadStatus = nomore;
						}
						
					}
				})
			},
		
		}
	}
</script>

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

自定义uView的组件，用起很方便的，主要是复用性很高 虽然样式看起来比较简洁，不过总体来说，中等一点的项目，很实用