uniCloud-列表分页

<template>
	<view class="home">
		<view class="content">
			<view class="item" v-for="item in articleList">
				<view class="text">
					<view class="title">{{item.title}}</view>
					<view class="info">
						<text>{{item.author}}</text>
						<text>{{item.posttime|date_formator}}</text>
						<text>删除</text>
					</view>
				</view>
				<view class="pic">
					<image src="../../static/lgreen.jpg" mode="aspectFill"></image>
				</view>
			</view>
		</view>
		<view class="tips" >
			<view v-if="loading==0"></view>
			<view v-if="loading==1">数据加载中...</view>
			<view v-if="loading==2">暂无更多...</view>
		</view>

		<view class="add-article" @click="toAddArticle">+</view>
	</view>
</template>

<script>
	// import  dayjs from "~@/static/plugins/dayjs.min.js"
	var dayjs = require('dayjs')
	export default {
		data() {
			return {
				articleList: [],
				page: 1,
				loading:0  //0 正常不显示tips  1 数据加载中  2  暂无更多
			}
		},
		filters: {
			// YYYY年MM月DD日 HH:mm:ss
			date_formator(value, formatStr = "HH:mm:ss") {
				return dayjs(value).format(formatStr)
			}
		},
		onLoad() {
			this.loading=0
			this.page = 1
			this.articleList=[]
			this.getArticlies()
		},
		//触底加载更多新闻
		onReachBottom() {
			this.loading=1
			this.page++
			this.getArticlies()
		},
		methods: {
			// 跳转到添加文章
			toAddArticle() {
				uni.navigateTo({
					url: "/pages/add/add"
				})
			},
			getArticlies() {
				uniCloud.callFunction({
					name: "get_all",
					data: {
						page: this.page
					},
					success: (res) => {
						console.log(res);
						if(res.result.data.length==0) { // 如果云函数返回的结果里已经没有数据了.tips显示状态2
							this.loading=2
							return
						}
						this.articleList =[...this.articleList,...res.result.data]
					},
					fail: (err) => {
						uni.showToast({
							title:"数据加载失败"
						})
						console.log(err.message);
					}
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.home {
		position: relative;
	}

	//左图右文
	.content {
		padding: 30rpx;

		.item {
			display: flex;
			justify-content: space-between;
			padding: 20rpx 0;
			border-bottom: 1px solid black;

			.text {
				flex: 1; //自动瓜分剩余空间
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				padding-right: 20rpx;

				.title {
					font-size: 40rpx;
					color: #333;
					// text-align: justify; //?

					//只显示两行,其余文字用...表示
					text-overflow: -o-ellipsis-lastline;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					line-clamp: 2;
					-webkit-box-orient: vertical;
				}

				.info {
					font-size: 28rpx;
					color: #888;

					text {
						margin-right: 20rpx;
					}
				}
			}

			.pic {
				width: 260rpx;
				height: 180rpx;

				image {
					width: 100%;
					height: 100%;
					border-radius: 4rpx;
					box-shadow: 3rpx 3rpx 6rpx gray;
				}
			}
		}

	}
	.tips{
		display: flex;
		justify-content: center;
		align-items: center;
		padding-bottom: 20rpx;
		view{
			padding: 30rpx 0;
			text-align: center;
			font-size: 26rpx;
			color: #888;
		}
	}

	.add-article {
		position: fixed;
		bottom: 10rpx;
		right: 10rpx;

		font-size: 80rpx;
		color: white;
		width: 100rpx;
		height: 90rpx;
		background-color: #41A863;
		border-radius: 50%;

		display: flex;
		justify-content: center;
		align-items: center;
		padding-bottom: 10rpx;

		box-shadow: 0 0 20rpx rgba(43, 153, 57, 1);
	}
</style>

'use strict';
exports.main = async (event, context) => {
	const { page = 0 } = event // 前端没穿page时 默认给0 
	const table = uniCloud.database().collection("articles")
	const num = 6 //每页显示的新闻条数
	return await table.limit(num).skip((page - 1) * num).orderBy("posttime", "desc").get()
};