onecric_h5/pages/Videos/test.vue

<template>
	<view class="video">
		<view class="header">
			{{$t('tips.title')}}
		</view>
		<helang-waterfall-list :status="waterfall.status" :list="waterfall.list" :reset="waterfall.reset"
			@click="onClick" @done="onDone"></helang-waterfall-list>
		<image src="/static/image/videos/add.png" mode="" @click="toUrl('./publish')" class="add"></image>
	</view>
</template>

<script>
	import helangWaterfallList from "@/uni_modules/helang-waterfall/components/waterfall/waterfall-list"

	// 列表接口模拟数据
	import mockData from '@/uni_modules/helang-waterfall/mock-data/waterfall-list.js'

	export default {
		components: {
			"helang-waterfall-list": helangWaterfallList
		},
		data() {
			return {
				// 异步请求相关
				ajax: {
					// 是否可以加载
					load: true,
					// 每页的请求条件
					rows: 10,
					// 页码
					page: 1,
					// 数据列表
					dataList: []
				},
				// 瀑布流组件相关
				waterfall: {
					status: "success",
					reset: false,
					list: []
				}

			}
		},
		onReady() {
			this.getList();
		},
		// 触底触发
		onReachBottom() {
			this.getList();
		},
		computed: {
			isLogin() {
				return this.$store.state.isLogin
			},
			info() {
				return this.$store.state.info
			}
		},
		// 下拉刷新
		onPullDownRefresh() {
			// 正常情况下接口返回应该很会很快。故意延迟调用，让用户有在刷新的体验感
			this.ajax.page = 1;
			this.ajax.load = true;
			this.getList();
		},
		methods: {
			toUrl() {
				// 判断是否登录
				if (this.isLogin == 2){
					this.$toUrl('/pages/login/login')
					return
				}
				if (this.info.is_writer != 1) return this.$toast('Please apply for')
				this.$toUrl('./publish')

			},

			// 瀑布流组件点击事件
			onClick(data, index, tag) {
				let direction = {
					"left": '左',
					"right": '右'
				}
				// this.globalData.info1 = ''
				// this.
				this.$common.set('videoInfo', data)
				this.$toUrl('./live?id=' + data.id + '&i=' + index)
			},
			// 瀑布流组件渲染完成
			onDone() {
				// 设置组件为 非重置，这行代码保留不删即可
				this.waterfall.reset = false;

				// 恢复 getList 方法的调用
				this.ajax.load = true;
				this.ajax.page++;

				// 设置组件状态为 等待加载
				this.waterfall.status = 'await';

				/**
				 * 如果你是一个追求完美的开发者，可以通过判断当前数据的长度和请求的数据长度来优化前端请求，减少不必要请求
				 * 不需要则删除
				 * */
				/**
				if(this.ajax.dataCount >= this.ajax.rows){
					this.ajax.load = true;
					this.ajax.page++;
				}
				*/
			},
			async getImage(res) {
				for (var i = 0; i < res.data.length; i++) {
					let {
						img
					} = res.data[i].video[0];

					let errMsg = await uni.getImageInfo({
						src: img,
					});
					if (errMsg[errMsg.length - 1].errMsg == 'getImageInfo:ok') {
						res.data[i].imgs = img
					} else {
						res.data[i].imgs = 'https://cdn.uviewui.com/uview/album/1.jpg'
					}

				}
				// 数据无效时处理
				if (!res.data || res.data.length < 1) {
					// 设置组件为 加载结束 状态
					this.waterfall.status = 'finish';
					return;
				}


				// 将数据赋值给瀑布流 list 属性
				this.waterfall.list = res.data;
				// 设置组件为 加载成功 状态
				this.waterfall.status = 'success';

				/**
				 * 下方的代码为扩展其他功能的示例代码 可做参考，不需要可删除
				 * */

				// 缓存当前数据给其他需要该数据的功能使用
				if (this.ajax.page == 1) {
					this.ajax.dataList = res.data;
				} else {
					this.ajax.dataList = [...this.ajax.dataList, ...res.data];
				}
				// 记录本次数据长度，意义请看 done 事件的回调
				this.ajax.dataCount = res.data.length || 0;
			},

			// 获取数据
			async getList() {
				if (!this.ajax.load) {
					return;
				}
				this.ajax.load = false;
				// 设置状态为加载中
				this.waterfall.status = 'loading';
				uni.$u.http.get('/api/Video/getList', {
					params: {
						page: this.ajax.page,
						type: 1
					}
				}).then(res => {
					// 获取到的数据，请注意数据结构
					// 第一页数据执行以下代码
					if (this.ajax.page == 1) {
						// 关闭下拉
						uni.stopPullDownRefresh();
						// 设置组件状态为 重置，可供下拉刷新这类需要重置列表功能时使用
						this.waterfall.reset = true;
					}
					this.getImage(res)
					// 。。。下面不需要写代码了，等待组件渲染完成

				}).catch(res => {})


				// 请求数据， mockData.getList 示例一个 ajax 请求
				// mockData.getList({
				// 	pageNum:this.ajax.page,
				// 	pageSize:this.ajax.rows
				// }).then(res=>{})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f3f3f3;
	}

	.video {
		padding-bottom: 100rpx;
	}

	.add {
		position: fixed;
		right: 32rpx;
		bottom: 172rpx;
		width: 94rpx;
		height: 94rpx;
		z-index: 99;
	}

	.header {
		position: sticky;
		top: 0;
		color: #fff;
		z-index: 999;
		font-weight: bold;
		font-size: 44rpx;
		padding: 26rpx 24rpx;
		background-color: #1D2550;
	}
</style>