wangluohuoyun-app/pages/news/index.vue

<template>
	<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
		style="background-color: #F5F6FA;">
		<u-navbar title="消息中心" leftIconSize='0' :bgColor="bgColor" :placeholder='true' leftIconColor="#fff"
			titleStyle='color:#fff' rightText='一键已读'>
		</u-navbar>
		<view class="top-bgc"></view>
		<view class="content">
			<view class="info-item flex" v-for="good in goods" :key="good.id">
				<view class="left">
					<u--image :showLoading="true" src="@/static/images/news/xt.png" width="80rpx" height="80rpx"></u--image>
				</view>
				<view class="right">
					<view class="row1 flex flex-space-between">
						<view class="title">
							系统消息
						</view>
						<view class="time">
							11:00
						</view>
					</view>
					<view class="row2 flex flex-space-between align-center">
						<view class="text point">
							您的驾驶证即将到期，请尽快到“我的…您的驾驶证即将到期，请尽快到“我的…您的驾驶证即将到期，请尽快到“我的…您的驾驶证即将到期，请尽快到“我的…
						</view>
						<view class="red-point"></view>
					</view>
				</view>
				<!-- 	<view class="flex flex-space-between">
					<view class="left">
						<view>系统消息</view>
						<u-badge :isDot="true" bgColor='red' :absolute='true' :offset='badgeOffset'></u-badge>
					</view>
					<view class="">
						今天 21:51
					</view>
				</view>
				<view class="flex flex-space-between">
					您的驾驶证即将到期，请尽快到“我的-身份认证”中更新，逾期将影响运费支付。
				</view> -->

			</view>
		</view>
	</mescroll-body>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import {
		apiGoods
	} from "@/api/mock.js"

	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				src: 'https://cdn.uviewui.com/uview/album/1.jpg',
				bgColor: '#317AFE',
				value: 100,
				goods: [], // 数据列表
				badgeOffset: [0, -5]
			}
		},
		methods: {
			back() {
				uni.navigateBack({

				})
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				// 此处可以继续请求其他接口
				// if(page.num == 1){
				// 	// 请求其他接口...
				// }

				// 如果希望先请求其他接口,再触发upCallback,可参考以下写法
				// if(!this.isInitxx){
				// 	apiGetxx().then(res=>{
				// 		this.isInitxx = true
				// 		this.mescroll.resetUpScroll() // 重新触发upCallback
				// 	}).catch(()=>{
				// 		this.mescroll.endErr()
				// 	})
				// 	return // 此处return,先获取xx
				// }

				//联网加载数据
				apiGoods(page.num, page.size).then(res => {
					//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
					//mescroll会根据传的参数,自动判断列表如果无任何数据,则提示空;列表无下一页数据,则提示无更多数据;

					//方法一(推荐): 后台接口有返回列表的总页数 totalPage
					//this.mescroll.endByPage(res.list.length, totalPage); //必传参数(当前页的数据个数, 总页数)

					//方法二(推荐): 后台接口有返回列表的总数据量 totalSize
					//this.mescroll.endBySize(res.list.length, totalSize); //必传参数(当前页的数据个数, 总数据量)

					//方法三(推荐): 您有其他方式知道是否有下一页 hasNext
					//this.mescroll.endSuccess(res.list.length, hasNext); //必传参数(当前页的数据个数, 是否有下一页true/false)

					//方法四 (不推荐),会存在一个小问题:比如列表共有20条数据,每页加载10条,共2页.如果只根据当前页的数据个数判断,则需翻到第三页才会知道无更多数据
					this.mescroll.endSuccess(res.list.length);

					//设置列表数据
					if (page.num == 1) this.goods = []; //如果是第一页需手动制空列表
					this.goods = this.goods.concat(res.list); //追加新数据
				}).catch(() => {
					//联网失败, 结束加载
					this.mescroll.endErr();
				})
			}
		}
	}
</script>

<style lang="scss">
	/deep/.u-navbar__content__right__text {
		font-size: 26rpx;
		color: #FFFFFF;
	}

	.top-bgc {
		position: absolute;
		width: 100%;
		height: 519rpx;
		background: linear-gradient(180deg, #317AFE 0%, #F8F9FC 100%);

	}

	.content {
		// position: relative;
		// top: 0;
		background: #FFFFFF;
		margin: 20rpx;
		width: calc(100% - 40rpx);
		padding: 20rpx;
		box-sizing: border-box;
		border-radius: 20rpx;
	}

	.info-item {
		padding: 30rpx 0;

		.left {
			margin-right: 20rpx;
		}

		.right {
			width: 100%;
			border-bottom: 1px solid #E6E6E6;

			.row1 {
				.title {
					font-size: 28rpx;
					color: #000000;
				}

				.time {
					font-size: 24rpx;
					color: #999999;
				}

			}

			.row2 {
				.text {
					font-size: 24rpx;
					color: #999999;
					width: 500rpx;
				}

				.red-point {
					width: 10rpx;
					height: 10rpx;
					background: #EE2F51;
					border-radius: 6rpx;
					margin-right: 20rpx;
				}
			}
		}
	}
</style>