瀑布流插件

下载地址

https://pan.baidu.com/s/1AFOWNPOUzLEq2iUWcOFuDw

提取码：azsk

使用

将下载的插件，复制到uni_modules中，然后打开文件，依次将以下代码复制到文件里去。

html

<helang-waterfall-list
	:status="waterfall.status"
	:list="waterfall.list"
	:reset="waterfall.reset"
	@click="onClick"
	@done="onDone"
>
	<template>
		<view v-if="waterfall.status == 'await'">
			<view class="load-txt">上拉加载更多</view>
		</view>
		<view v-else-if="waterfall.status == 'loading'">
			<view class="load-txt">加载中</view>
		</view>
		<view v-else-if="waterfall.status == 'success'">
			<view class="load-txt">加载中</view>
		</view>
		<view v-else-if="waterfall.status == 'finish'">
			<view class="load-txt">没有更多了</view>
		</view>
		<view v-else-if="waterfall.status == 'fail'">
			<image class="load-icon" src="../../static/waterfall/fail.png"></image>
			<view class="load-txt">出错了，请刷新重试</view>
		</view>
		<view v-else-if="waterfall.status == 'empty'">
			<image class="load-icon" src="../../static/waterfall/empty.png"></image>
			<view class="load-txt">暂无数据</view>
		</view>
		<view v-else><!-- 别问我为什么要写一个 v-else 的空 view,不写H5平台就会有CSS生效的离谱BUG --></view>
	</template>
</helang-waterfall-list>

引入插件

/*瀑布流插件 start*/
import helangWaterfallList from "@/uni_modules/helang-waterfall/components/waterfall/waterfall-list"
// 列表接口模拟数据
import mockData from "@/uni_modules/helang-waterfall/mock-data/waterfall-list.js"
/*瀑布流插件 end*/

实例化插件

export default {
	components: {
		"helang-waterfall-list": helangWaterfallList
	},

设置data

/*瀑布流插件*/
// 异步请求相关
ajax: {
	// 是否可以加载
	load: true,
	// 每页的请求条件
	rows:10,
	// 页码
	page:1,
	// 数据列表
	dataList:[]
},
// 瀑布流组件相关
waterfall:{
	status:"",
	reset:false,
	list:[]
}

生命周期

onReady () {

	// 瀑布流 启动
	this.getList();
},
// 触底触发
onReachBottom() {
	this.getList();
},
// 下拉刷新
onPullDownRefresh(){
	// 正常情况下接口返回应该很会很快。故意延迟调用，让用户有在刷新的体验感
	setTimeout(()=>{
		this.ajax.page = 1;
		this.ajax.load = true;
		this.getList();
	},800);
},
/*瀑布流插件 end*/

函数

// 瀑布流组件点击事件
onClick(data,index, tag){
	console.log(data);
	let direction = {
		"left":'左',
		"right":'右'
	}
	// uni.showToast({
	// 	title:`${direction[tag]}侧列表第${index+1}个被点击`,
	// 	icon:'none'
	// })
},
// 瀑布流组件渲染完成
onDone(){
	// 设置组件为 非重置，这行代码保留不删即可
	this.waterfall.reset = false;
	
	// 恢复 getList 方法的调用
	this.ajax.load = true;
	this.ajax.page++;
	
	// 设置组件状态为 等待加载
	if(this.waterfall.list.length <this.ajax.rows){
		this.waterfall.status = 'finish';
	}else{
		this.waterfall.status = 'await';
	}
},
// 获取数据
getList() {
	let ts = this
	if (!this.ajax.load) {
		return;
	}
	this.ajax.load = false;
	
	// 设置状态为加载中
	this.waterfall.status = 'loading';
	
	// 请求数据，调取getList函数，并传入参数，具体在@/uni_modules/helang-waterfall/mock-data/waterfall-list.js这个文件里
	mockData.getList({
		// 第几页
		pageNum:this.ajax.page,
		// 每页加载几个
		pageSize:this.ajax.rows,
		// 请求地址
		path: ts.$tools.path_shoping+"/get/goods"
	}).then(res=>{
		// 获取到的数据，请注意数据结构
		console.log(res);
		
		// 第一页数据执行以下代码
		if(this.ajax.page == 1){
			// 关闭下拉
			uni.stopPullDownRefresh();
			
			// 设置组件状态为 重置，可供下拉刷新这类需要重置列表功能时使用
			this.waterfall.reset = true;
		}
		
		// 将数据赋值给瀑布流 list 属性
		this.waterfall.list = res;
		// 设置组件为 加载成功 状态，此时瀑布流组件开始计算当前数据的布局
		this.waterfall.status = 'success';
		
		// 数据无效时处理
		if(!res || res.length < 1){
			// 设置组件为 加载结束 状态
			this.waterfall.status = 'finish';
			// console.log(this.waterfall.status)
			// return;
		}
		
	})
},