sooka_consult_uniapp/pages/index/announcementList.vue

<template>
	<view class="list">
		<view v-for="(item, index) in list" :key="item.id" class="item">
			<img :src="loadImgSrc(`${item.announcementImg}`)" class="avatar" />
			<view class="info" style="height: 10em;">
				<view class="name" @click="handleNavigate(item)">
					{{ item.announcementTitle }}
					<view class="unread-dot" v-if="item.readType == 0"></view>
				</view>
			</view>
			<em class="iconfont icon-xiangyoujiantou" @click="handleNavigate(item)"></em>
		</view>
	</view>
</template>

<script>
import { getList } from '@/api/index/index.js';

export default {
	data() {
		return {
			queryParam: {
				pageNum: 1,
				pageSize: 10,
				userId: getApp().globalData.userId
			},
			total: null,
			list: []
		};
	},
	onLoad() {
		this.getAnnoList();
	},
	onReachBottom() {
		let pageNum = this.queryParam.pageNum;
		let pageSize = this.queryParam.pageSize;
		let total = this.total;
		if (pageNum * pageSize >= total) {
			uni.showToast({
				title: '暂无更多数据'
			});
			return;
		} else {
			this.queryParam.pageNum += 1;
			this.getAnnoList();
		}
	},
	methods: {
		getAnnoList() {
			console.log(this.queryParam)
			getList(this.queryParam).then((res) => {
				this.list = [...this.list,...res.rows]
				// this.list = res.rows;
				this.total = res.total;
			});
		},
		handleNavigate(item) {
			item.readType = 1;
			uni.navigateTo({
				url: '/pages/index/announcementDetails?id=' + item.id
			});
		}
	}
};
</script>
<style>
.list {
	padding: 20rpx;
}

.item {
	display: flex;
	align-items: center;
	margin-bottom: 20rpx;
}

.avatar {
	width: 60rpx;
	height: 60rpx;
	border-radius: 50%;
}

.info {
	display: flex;
	align-items: center;
}

.name {
	font-size: 28rpx;
	font-weight: bold;
	margin-right: 10rpx; /* 添加间距 */
	position: relative;
}

.unread-dot {
	width: 10rpx;
	height: 10rpx;
	background-color: red;
	border-radius: 50%;
	position: absolute;
	right: -15rpx; /* 相对于父容器位置调整 */
	top: 50%;
	transform: translateY(-50%);
}
</style>