list.nvue

<template>
	<!--
	本页面模板教程：https://ext.dcloud.net.cn/plugin?id=2651
	uni-list 文档：https://ext.dcloud.net.cn/plugin?id=24
	uniCloud 文档：https://uniapp.dcloud.io/uniCloud/README
	uni-clientDB 组件文档：https://uniapp.dcloud.net.cn/uniCloud/uni-clientdb-component
	DB Schema 规范：https://uniapp.dcloud.net.cn/uniCloud/schema
	 -->
	<view style="overflow: hidden;">
		<!-- 搜索栏 -->
		<template>
			<status-bar/>
			<uni-search-bar ref="searchBar" radius="100" v-model="searchText" @search-click="searchClick" @clear="clear" @click.native="searchClick"
			 @cancel="search" cancelButton="none" disabled />
		</template>
		<view class="list">
			<!-- 刷新页面后的顶部提示框 -->
			<!-- 当前弹出内容没有实际逻辑 ，可根据当前业务修改弹出提示 -->
			<view class="tips" :class="{ 'tips-ani': tipShow }">为您更新了10条内容</view>
			<!-- 页面分类标题 -->
			<uni-section style="margin:0;" :title="listTitle" type="line"></uni-section>
			<uni-clientdb ref="udb" :where="where" v-slot:default="{data, loading, error, options}" :options="formData" :collection="collection"
			 :field="field" @load="load">
				<!-- 基于 uni-list 的页面布局 -->
				<uni-list>
					<!-- to 属性携带参数跳转详情页面，当前只为参考 -->
					<uni-list-item direction="column" v-for="item in data" :key="item.id" :to="'/pages/list/detail?id='+item._id+'&title='+item.title">
						<!-- 通过body插槽定义列表内容显示 -->
						<template v-slot:body>
							<view class="uni-list-box">
								<view class="uni-thumb">
									<!-- 当前判断长度只为简单判断类型，实际业务中，根据逻辑直接渲染即可 -->
									<image class="uni-thumb-img" :src="item.avatar" mode="aspectFill"></image>
								</view>
								<view class="uni-content">
									<text class="uni-title-sub uni-ellipsis-2">{{item.title}}</text>
									<view class="uni-note">
										<text class="uni-footer-text">评论 {{item.comment_count}}</text>
										<text class="uni-footer-text">点赞 {{item.like_count}}</text>
									</view>
								</view>
							</view>
						</template>
						<!-- 同步footer插槽定义列表底部的显示效果 -->
						<template v-slot:footer>
							<view class="uni-footer">
								<text class="uni-footer-text">{{item.author[0].username}}</text>
								<text class="uni-footer-text">{{ item.last_modify_date | beforTime }}</text>
							</view>
						</template>
						
					</uni-list-item>
				</uni-list>
				<!-- 通过 loadMore 组件实现上拉加载效果，如需自定义显示内容，可参考：https://ext.dcloud.net.cn/plugin?id=29 -->
				<uni-load-more v-if="loading || options.status === 'noMore' " :status="options.status" />
			</uni-clientdb>
		</view>
	</view>
</template>

<script>
	import { friendlyDate } from '@/common/utils.js';
	import statusBar from "@/uni_modules/uni-nav-bar/components/uni-nav-bar/uni-status-bar";
	export default {
		components:{
			statusBar
		},
		data() {
			return {
				searchText: '',
				where: '',
				// 数据表名
				collection: 'opendb-news-articles,uni-id-users',
				// 查询字段，多个字段用 , 分割
				field: 'author{username, _id}, user_id,_id,avatar,title,excerpt,last_modify_date, comment_count, like_count',
				formData: {
					status: 'loading' // 加载状态
				},
				tipShow: false // 是否显示顶部提示框
			};
		},
		onShow(options) {
			this.searchText = getApp().globalData.searchText;
		},
		filters:{
			beforTime(number){
				return friendlyDate(+number);
			}
		},
		methods: {
			/**
			 * 下拉刷新回调函数
			 */
			onPullDownRefresh() {
				this.tipShow = true
				this.formData.status = 'more'
				this.$refs.udb.loadData({
					clear: true
				}, () => {
					this.tipShow = false
					uni.stopPullDownRefresh()
				})
			},
			/**
			 * 上拉加载回调函数
			 */
			onReachBottom() {
				this.$refs.udb.loadMore()
			},
			load(data, ended) {
				if (ended) {
					this.formData.status = 'noMore'
				}
			},
			search(text = '') {
				this.where = text ? `${new RegExp(text, 'gi')}.test(title)` : '';
			},
			clear() {
				getApp().globalData.searchText = '';
			},
			searchClick() {
				uni.hideKeyboard();
				uni.navigateTo({
					url: '/pages/search/search',
					animationType: 'fade-in'
				});
			}
		},
		watch: {
			searchText(value) {
				this.search(value);
			}
		},
		computed: {
			listTitle() {
				return this.searchText === '' ? '最新' : '搜索结果'
			}
		}
	};
</script>

<style lang="scss" scoped>
	@import '@/common/uni-ui.scss';

	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #efeff4;
		min-height: 100%;
		height: auto;
	}

	.tips {
		color: #67c23a;
		font-size: 14px;
		line-height: 40px;
		text-align: center;
		background-color: #f0f9eb;
		height: 0;
		opacity: 0;
		transform: translateY(-100%);
		transition: all 0.3s;
	}

	.tips-ani {
		transform: translateY(0);
		height: 40px;
		opacity: 1;
	}

	.shop {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.shop-picture {
		width: 110px;
		height: 110px;
	}

	.shop-picture-column {
		width: 100%;
		height: 170px;
		margin-bottom: 10px;
	}

	.shop-price {
		margin-top: 5px;
		font-size: 12px;
		color: #ff5a5f;
	}

	.shop-price-text {
		font-size: 16px;
	}

	.hot-tag {
		background: #ff5a5f;
		border: none;
		color: #fff;
	}

	.button-box {
		height: 30px;
		line-height: 30px;
		font-size: 12px;
		background: #007AFF;
		color: #fff;
	}

	.uni-link {
		flex-shrink: 0;
	}

	.ellipsis {
		display: flex;
		overflow: hidden;
	}

	.uni-ellipsis-1 {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.uni-ellipsis-2 {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		
		lines: 2;
	}


	// 默认加入 scoped ，所以外面加一层提升权重
	.list {
		.uni-list--waterfall {

			/* #ifndef H5 || APP-VUE */
			// 小程序 编译后会多一层标签，而其他平台没有，所以需要特殊处理一下
			/deep/ .uni-list {
				/* #endif */
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				padding: 5px;
				box-sizing: border-box;

				/* #ifdef H5 || APP-VUE */
				// h5 和 app-vue 使用深度选择器，因为默认使用了 scoped ，所以样式会无法穿透
				/deep/
				/* #endif */
				.uni-list-item--waterfall {
					width: 50%;
					box-sizing: border-box;

					.uni-list-item__container {
						padding: 5px;
						flex-direction: column;
					}
				}

				/* #ifndef H5 || APP-VUE */
			}

			/* #endif */
		}
	}

	.search-icons {
		padding: 16rpx;
	}

	.search-container-bar {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: center;
		align-items: center;
		position: fixed;
		left: 0;
		right: 0;
		z-index: 10;
		background-color: #fff;
	}

	/* #ifndef APP-NVUE */
	/deep/
	/* #endif */
	.uni-searchbar__box {
		border-width: 0;
	}

	/* #ifndef APP-NVUE */
	/deep/
	/* #endif */
	.uni-input-placeholder {
		font-size: 28rpx;
	}
	
	
	
	
	
	.uni-content{
		flex: 1;
	}
	.uni-thumb-img{
		width: 125px;
		height: 75px;
	}
	.uni-note{
		display: flex;
		flex-wrap: nowrap;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
</style>