qjm/pages/info/xttz.vue

<template>
	<view class="content">
		<empty v-if="loadingType === 'noMore' && list.length === 0"></empty>
		<view v-for="(item, index) in list" :key="index" class="order-item flex">
			<view class="title-box">
				<view class="title">
					<text>{{ item.msg }}</text>
				</view>
				<view class="time">
					<text>{{ item.add_time }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import empty from '@/components/empty';
import { message } from '@/api/user.js';
import { getTime } from '@/utils/rocessor.js';
export default {
	components: {
		empty
	},
	data() {
		return {
			page: 1,
			limit: 10,
			loadingType: 'more',
			list: []
		};
	},
	onLoad() {
		this.loadData();
	},
	onShow() {},
	onReachBottom() {
		this.loadData();
	},
	onReady() {},
	methods: {
		loadData() {
			const obj = this;
			if (obj.loadingType === 'loading' || obj.loadingType === 'noMore') {
				//防止重复加载
				return;
			}
			obj.loadingType = 'loading';
			message({
				page: obj.page,
				limit: obj.limit
			}).then(({ data }) => {
				data.list.forEach(e => {
					e.add_time = getTime(e.add_time);
				});
				obj.list = obj.list.concat(data.list);
				console.log(obj.list);
				if (obj.limit == data.list.length) {
					//判断是否还有数据， 有改为 more， 没有改为noMore
					obj.loadingType = 'more';
					return;
				} else {
					//判断是否还有数据， 有改为 more， 没有改为noMore
					obj.loadingType = 'noMore';
				}
				uni.hideLoading();
			});
		}
	}
};
</script>

<style lang="scss">
page,
.content {
	min-height: 100%;
	height: auto;
	background: #ffffff;
}
.order-item {
	padding: 20rpx 30rpx;
	line-height: 1.5;
	.title-box {
		.title {
			font-size: $font-lg;
			color: $font-color-base;
		}
		.time {
			font-size: $font-base;
			color: $font-color-light;
		}
	}
	.money {
		color: #fd5b23;
		font-size: $font-lg;
	}
}
</style>