family-education/education_uni/pages/message/message.vue

<template>
	<view>
		<uni-list v-for="(item,index) in list" :key="index">
			<!-- 头像显示圆点 -->
			<uni-list-chat clickable="true" :title="item.msgTitle" avatar="/static/avatar-msg.png" :note="item.msgContent" :time="item.datetime" :badge-positon="item.position" badge-text="dot" @click="gotoDetail(item)"></uni-list-chat>
		</uni-list>
	</view>
</template>

<script>
	import badgeMix from '@/mixins/tabbar-badge.js'
	export default {
		mixins: [badgeMix],
		data() {
			return {
				list: [],
				// 查询对象
				queryObject: {
					pageNum: 1,
					pageSize: 15
				},
				total: 0,
				isLoading: false
			};
		},
		onShow() {
			this.queryObject.pageNum = 1
			this.queryObject.pageSize = 15
			this.list = []
			this.getMsgList()
		},
		methods: {
			async getMsgList(cb) {				
				// 打开节流阀
				this.isLoading = true
				const params = {
					pageNum: this.queryObject.pageNum,
					pageSize: this.queryObject.pageSize
				}
				const { data: result } = await uni.$http.get('/education/mp-inner-msg/queryMsg', params)
				this.isLoading = false
				
				// 加载完数据执行
				cb && cb()
				if (result.data.list !== undefined) {
					this.list = [...this.list, ...result.data.list]
					this.total = result.data.count
				}
			},
			gotoDetail(item) {
				// item.position = 'none'
				uni.navigateTo({
					url: '/subpkg/my/message/my_message_detail?item='+encodeURIComponent(JSON.stringify(item))
				})
			},
			// 触底事件
			onReachBottom() {
				// 判断是否有下一页的数据
				if (this.queryObject.pageNum * this.queryObject.pageSize >= this.total) return uni.$showMsg('数据加载完毕！')
			
				// 判断是否正在请求其他数据
				if (this.isLoading) return
				this.queryObject.pageNum += 1
				// 重新获取数据
				this.getMsgList()
			},
			// 下拉刷新事件
			onPullDownRefresh() {
				// 1. 重置关键数据
				this.queryObject.pageNum = 1
				this.total = 0
				this.list = []
				// 2.重新发起请求
				this.getMsgList(() => uni.stopPullDownRefresh())
			}
		}
	}
</script>

<style lang="scss">

</style>