teaching-uniapp/pages/messageSystem/messageSystem.vue

<template>
	<view class="messageSys">
		<statusBar :item="navBarData"></statusBar>
		<scroll-view scroll-y="true" :scroll-top="scrollTop" id="scrollview"  :style="{height:(screenHeight - navheight)+'px' }">
			<view class="reverse" id="msglistview">
				<view class="content" v-for="(item,index) in list" :key="index">
					<view class="conblock">
						<view class="header">
							<view class="disC three-font">
								成功加入[{{item.acName}}]{{item.type>=2?'教研室':'活动'}}
							</view>
						</view>
						<view class="sj fwb-font">{{item.create_at}}</view>
						<view class="main">
							<view class="fwb-font">
								尊敬的
								<text>{{item.username}}</text>
							</view>

							<view class="fwb-font" style="text-indent: 2em;">
								我们很高兴通知您，您已成功加入
								<text class="btn-font" style="color: #0056a8;">[{{item.acName}}]</text>
								！欢迎加入我们的团队，我们期待与您一同合作并共同追求卓越教育。
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navBarData: {
					title: '系统消息',
					btn: 1
				},
				newsLoading: 0, //0默认值  1加载中 2没有更多了
				currentPage: 1,

				navheight: this.navheight, //导航栏高度
				scrollTop: 0,
				// 渲染列表
				list: [],
			};
		},
		methods: {
			// 获取数据
			getdata() {
				let data = {
					oid: this.$store.state.user.openid, //用户id
					type: 1,
					page: this.currentPage,
					lim: 30
				}
				this.$request('/selectMessage', "POST", data).then(res => {
					// console.log('获取', res[0]);
					// this.list = [this.list,...res[0]]
					this.list = res[0]
					// console.log('获取',this.list);
				})
			},
			updateisread() {
				let data = {
					oid: this.$store.state.user.openid, //用户id
					type: 1,
				}
				this.$request('/updateIsRead', "POST", data).then(res => {
					// console.log('获取', res);
				})
			},
			// 聊天记录自动跳转底部
			scrollToBottom() {
				let that = this
				let query = uni.createSelectorQuery()
				query.select('#scrollview').boundingClientRect()
				query.select('#msglistview').boundingClientRect()
				query.exec((res) => {
					// console.log('res', res);
					console.log('res',res[1].height, res[0].height);
					// console.log(res[1].height, res[0].height);
					if (res[1].height > res[0].height) {
						that.scrollTop = res[1].height - res[0].height
					}
				})
			}
		},
		onShow() {
			// 获取页面数据
			this.getdata()
			// 更新已读
			this.updateisread()
		},
		// 进入页面渲染完毕后调用
		onReady() {
			this.scrollToBottom()
		},
		onLoad() {
			// this.userName = this.$store.state.user.userName
			// this.getdata()
		}
	}
</script>

<style lang="scss">
	.classTest {
		font-size: 30px;
	}

	.messageSys {
		padding-bottom: 80rpx;
		
	}


	.reverse {
		// flex: 1;
		display: flex;
		flex-direction: column-reverse;
		.content {
			padding: 10px;
			margin: 10px;
			background-color: white;
			border-radius: 8px;

			.conblock {
				.header {
					color: black;
					font-weight: 600;
					display: flex;
					justify-content: space-between;

					.disC {
						display: flex;
						width: 100%;
						font-weight: bold;
						justify-content: space-between;
						align-items: baseline;
						/*隐藏溢出*/
						/*当文本溢出包含元素时显示省略符号来代表被修剪的文本*/
						/*规定段落中的文本不进行换行*/
						white-space: normal;
						letter-spacing: 2rpx;
						display: -webkit-box;
						word-break: break-all;
						text-overflow: ellipsis;
						overflow: hidden;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						/*设置 需要显示的行数*/
					}
				}

				.sj {
					color: #999999;
					font-weight: 500;
					padding: 10rpx 0;
				}

				.main {
					color: #999999;

					view {
						font-weight: 400;
						// font-size: 14px;


						view {
							color: #0056a8;
							font-weight: 600;
						}
					}


				}
			}
		}
	}
</style>