app/pages/search/searchVd.vue

<template>
	<view class="wrap">
		<view v-if="flowList.length">
			<u-waterfall
				v-model="flowList"
				ref="uWaterfall"
				idKey="vlogId"
			>
				<template v-slot:left="{ leftList }">
					<view
						class="demo-warter"
						v-for="(item, index) in leftList"
						:key="index"
						@click="goToVlog(item.vlogId)"
					>
						<u-lazy-load
							border-radius="10"
							:image="item.cover || item.firstFrameImg"
							:index="index"
						></u-lazy-load>
						<view class="content">
							{{ item.content }}
						</view>
						<view class="flxbox">
							<view class="bottom-info">
								<u-image
									width="40rpx"
									height="40rpx"
									:src="item.vlogerFace"
									loading-icon="/static/missing-face.png"
									error-icon="/static/missing-face.png"
									shape="circle"
									style="display: flex; align-items: center"
								></u-image>
								<view class="showOne ml">{{ item.vlogerName }}</view>
							</view>
							<view class="bottom-info pdr">
								<image
									style="width: 20rpx; height: 20rpx"
									src="/static/images/icon-comment-unlike.png"
								></image>
								<view class="ml">{{ getGraceNumber(item.likeCounts) }}</view>
							</view>
						</view>
					</view>
				</template>
				<template v-slot:right="{ rightList }">
					<view
						class="demo-warter"
						v-for="(item, index) in rightList"
						:key="index"
						@click="goToVlog(item.vlogId)"
					>
						<u-lazy-load
							border-radius="10"
							:image="item.cover || item.firstFrameImg"
							:index="index"
						></u-lazy-load>
						<view class="content">
							{{ item.content }}
						</view>
						<view class="flxbox">
							<view class="bottom-info">
								<u-image
									width="40rpx"
									height="40rpx"
									loading-icon="/static/missing-face.png"
									error-icon="/static/missing-face.png"
									:src="item.vlogerFace"
									shape="circle"
									style="display: flex; align-items: center"
								></u-image>
								<view class="showOne ml">{{ item.vlogerName }}</view>
							</view>
							<view class="bottom-info pdr">
								<image
									style="width: 20rpx; height: 20rpx"
									src="/static/images/icon-comment-unlike.png"
								></image>
								<view class="ml">{{ getGraceNumber(item.likeCounts) }}</view>
							</view>
						</view>
					</view>
				</template>
			</u-waterfall>
			<u-loadmore
				style="padding: 10px 0"
				bg-color="#f8f8f8"
				:status="loadStatus"
				@loadmore="getData"
			></u-loadmore>
		</view>

		<u-empty
			class="mt20"
			v-else
			text="暂无数据"
			mode="data"
		></u-empty>
	</view>
</template>

<script>
import { vlogList } from '@/api/vlog';
import { graceNumber, isStrEmpty } from '@/utils/tools.js';
import storage from '@/utils/storage.js'; //缓存
export default {
	props: {
		keywords: {
			default: ''
		}
	},
	data() {
		return {
			flag: 0, // 在tabs中的索引
			loadStatus: 'loadmore',
			flowList: [],
			page: 0,
			totalPage: 0,
			search: ''
		};
	},
	created() {
		this.initData();
	},
	methods: {
		initData() {
			this.clear();
			this.search = this.keywords;
			this.page = 0;
			this.totalPage = 0;
			this.flowList = [];
			this.loadStatus = 'loadmore';
			this.getData();
		},
		async getData() {
			try {
				if (this.loadStatus !== 'loadmore') return;
				let me = this;
				me.loadStatus = 'loading';
				let page = me.page + 1;
				let keywords = me.search;
				let userInfo = storage.getVlogUserInfo();
				let userId = '';
				if (userInfo != null) {
					userId = userInfo.id;
				}
				var result = await vlogList(page, 10, userId, '', keywords);
				console.log(result);
				if (result.data.status == 200) {
					let flowList = result.data.data.rows;
					let totalPage = result.data.data.total;
					me.flowList = me.flowList.concat(flowList);
					me.page = page;
					me.totalPage = totalPage;
					if (page >= totalPage) {
						me.loadStatus = 'nomore';
					} else {
						me.loadStatus = 'loadmore';
					}
				}
			} catch (e) {
				console.log(e);
				this.loadStatus = 'nomore';
			}
		},
		// 把超过1000或10000的数字调整，比如1.3k/6.8w
		getGraceNumber(num) {
			return graceNumber(num);
		},
		goToVlog(vlogId) {
			uni.navigateTo({
				url: '/pages/me/vlog?vlogId=' + vlogId
			});
		},
		remove(id) {
			this.$refs.uWaterfall.remove(id);
		},
		clear() {
			var dom = this.$refs.uWaterfall;
			if (dom) {
				dom.clear();
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.mt20 {
	margin-top: 20% !important;
}
.demo-warter {
	border-radius: 8px;
	margin: 5px;
	background-color: #ffffff;
	padding: 2px;
	position: relative;
	max-width: 329rpx;
	width: 100%;
}

.u-close {
	position: absolute;
	top: 32rpx;
	right: 32rpx;
}

.showOne {
	width: 180rpx;
	font-size: 32rpx;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.content {
	// width: 329rpx;
	font-size: 28rpx;
	color: #000;
	margin-top: 5px;
	display: -webkit-box;
	-webkit-line-clamp: 3; /* 最多显示三行 */
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}
.flxbox {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 5px;
}
.bottom-info {
	display: flex;
	align-items: center;
	font-size: 22rpx;
	color: $u-tips-color;
}
.ml {
	display: block;
	margin-left: 5px;
}
.pdr {
	padding-right: 5px;
}
</style>