teaching-uniapp/pages/messageDy/messageDy.vue

<template>
	<view class="messageDy">
		<statusBar :item="navBarData"></statusBar>

		<scroll-view scroll-y="true" :scroll-top="scrollTop" id="scrollview" class="scrollV"
			: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;width: 100%;">
								我们很高兴通知您，您已成功订阅
								<text class="btn-font Xbold" 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,
				list: [],
				scrollTop: 0,
				navheight: this.navheight, //导航栏高度
				screenHeight: this.screenHeight
			};
		},
		methods: {

			// 获取数据
			getdata() {
				let data = {
					oid: this.$store.state.user.openid, //用户id
					type: 2,
					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);
				})
			},
			// 聊天记录自动跳转底部
			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[0].height, res[1].height);
					if (res[1].height > res[0].height) {
						that.scrollTop = res[1].height - res[0].height
					}
				})
			},

			// 更新已读
			updateisread() {
				let data = {
					oid: this.$store.state.user.openid, //用户id
					type: 2,
				}
				this.$request('/updateIsRead', "POST", data).then(res => {
					// console.log('获取', res);
				})
			},
		},
		// 进入页面渲染完毕后调用
		onReady() {
			// this.scrollToBottom()
			this.scrollToBottom();
			console.log(11111);
		},
		onLoad() {
			this.getdata()
			// 更新已读
			this.updateisread()
			// this.scrollToBottom()
		}
	};
</script>

<style lang="scss">
	.messageDy {
		height: 100vh;
		
	}

	.scrollV {
		// overflow: hidden;
		// height: 200rpx !important;
		// background-color: #0056a8;
	}



	.reverse {
		display: flex;
		flex-direction: column-reverse;
		padding-bottom: 80rpx;

		.content {
			padding: 10px;
			margin: 10px;
			background-color: white;
			border-radius: 8px;
			display: flex;
			justify-content: center;

			.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;
					font-weight: 400;

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

				}
			}
		}
	}
</style>