list.nvue

<template>
	<view>
		<!-- #ifndef H5 -->
		<uni-nav-bar :border="false"></uni-nav-bar>
		<!-- #endif -->
		<!-- 搜索功能 -->
		<uni-search-bar @click="searchClick" class="uni-search-box" v-model="keyword" ref="searchBar" radius="100" cancelButton="none" disabled/>
		<unicloud-db ref='udb' v-slot:default="{data,pagination,hasMore, loading, error, options}" @error="onqueryerror"
			:where="where" collection="opendb-news-articles,uni-id-users" :page-size="10"
			field="avatar,title,last_modify_date,user_id{username}">
			<!-- 基于 uni-list 的页面布局 -->
			<uni-list class="uni-list" :border="false" :bounce="true" :alwaysScrollableVertical="true"  :style="{height:listHight}">
				<uni-list-item v-if="error">
					<template slot="body">
						<!-- 设置网络 -->
						<uni-network @change="refresh" @retry="refresh"></uni-network>
					</template>
				</uni-list-item>
				
				<template v-else>
					<uni-list-item class="get-data-state" v-if="data.length===0&&pagination.current===1">
						<view class="f1" slot="body">
							<!-- 数据为空 当前页码为1，且正在加载中;这里为了演示，更加直观的表达内部逻辑。商用项目建议将这部分封装为组件，更好的让业务逻辑与功能分离-->
							<uni-load-more v-if="loading" status="loading"></uni-load-more>
							<template v-else>
								<text class="get-data-state-text">内容为空</text>
							</template>
						</view>
					</uni-list-item>
					<uni-list-item :to="'./detail?id='+item._id+'&title='+item.title"
						v-for="(item,index) in data" :key="index">
						<!-- 通过header插槽定义列表左侧图片 -->
						<template v-slot:header>
							<image class="avatar" :src="item.avatar" mode="aspectFill"></image>
						</template>
						<!-- 通过body插槽定义布局 -->
						<view slot="body" class="main">
							<text class="title">{{ item.title }}</text>
							<view class="info">
								<text class="author">{{item.user_id[0].username}}</text>
								<uni-dateformat class="last_modify_date" :date="item.last_modify_date"
									format="yyyy-MM-dd" :threshold="[60000, 2592000000]" />
							</view>
						</view>
					</uni-list-item>

					<!-- 存在下一页数据 && 不是正在加载中 && 已经满一页； 通过 loadMore 组件实现上拉加载效果，如需自定义显示内容，可参考：https://ext.dcloud.net.cn/plugin?id=29 -->
					<uni-list-item v-if="!loading&&data.length>10">
						<template slot="body">
							<uni-load-more :status="hasMore ? 'more' : 'noMore'"></uni-load-more>
						</template>
					</uni-list-item>
				</template>
			</uni-list>
		</unicloud-db>
	</view>
</template>

<script>
	var cdbRef, currentWebview;
	export default {
		data() {
			return {
				where: "",
				keyword: "",
				refreshState: 0,
				listHight: 0
			}
		},
		watch: {
			keyword(keyword, oldValue) {
				if(keyword){
					this.where = `/${keyword}/.test(title)`;
				}else{
					this.where = '';
				}
			}
		},
		onReady() {
			// #ifdef APP-NVUE
			this.listHight = uni.getSystemInfoSync().windowHeight - 96 + 'px'
			// #endif
			// #ifndef APP-NVUE
			this.listHight = 'auto'
			// #endif
			cdbRef = this.$refs.udb
		},
		onShow() {
			this.keyword = getApp().globalData.searchText
			getApp().globalData.searchText = ''
			if(this.keyword){
				// #ifdef APP-PLUS
				if (!currentWebview) {
					let pages = getCurrentPages();
					currentWebview = pages[pages.length - 1].$getAppWebview();
				}
				// 设置 searchInput的 text
				currentWebview.setTitleNViewSearchInputText(this.keyword)
				// #endif
			}
		},
		methods: {
			searchClick(e) { //点击搜索框
				uni.hideKeyboard();
				uni.navigateTo({
					url: '/pages/list/search/search',
					animationType: 'fade-in'
				});
			},
			retry(){
				this.refresh()
			},
			refresh(){
				cdbRef.loadData({
					clear: true
				}, () => {
					uni.stopPullDownRefresh()
				})
				console.log('refresh');
			}
		},
		onPullDownRefresh() {
			this.refresh()
		},
		onReachBottom() {
			cdbRef.loadMore({clear: true})
		}
	}
</script>

<style scoped>
	.avatar {
		width: 200rpx;
		height: 200rpx;
		margin-right: 10rpx;
	}

	.main {
		justify-content: space-between;
	}

	.title {
		width: 480rpx;
		font-size: 32rpx;
	}

	.info {
		flex-direction: row;
		justify-content: space-between;
	}

	.author,
	.last_modify_date {
		font-size: 28rpx;
		color: #999999;
	}

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

	.uni-search-box {
		background-color: #FFFFFF;
		position: sticky;
		top: 0;
		left: 0;
		/* #ifndef APP-PLUS */
		z-index: 9;
		/* #endif */
	}
	.show-refresh-tip {
		transform: translateY(0);
		height: 40px;
		opacity: 1;
	}

	.get-data-state {
		width: 750rpx;
		align-items: center;
	}

	.get-data-state-img {
		width: 500rpx;
	}

	.get-data-state-text {
		width: 32rpx;
		color: #999999;
		line-height: 50rpx;
		height: 50rpx;
		width: 750rpx;
		text-align: center;
	}
	.uni-list {}
	.f1{
		flex: 1;
	}
</style>