v3-lab-xcx/pages/information/information.vue

<!-- 消息 -->
<template>
	<view id="information">
		<scroll-view scroll-y @scrolltolower="scrollGet" class="info-max-box">
			<view class="for-info-box" v-for="(item,index) in dataList" :key="index" @click="goInfoPage(item)">
				<img src="@/images/basicsModules/icon_xx_tz.png">
				<view class="right-box">
					<view class="top-box">
						<view>{{item.userName}}</view>
						<view>{{item.deptName}}</view>
						<view>{{item.sendTime}}</view>
					</view>
					<view class="bottom">{{item.title}}</view>
				</view>
			</view>
			<view class="get-null-box" v-if="!dataList[0]">暂无更多数据</view>
		</scroll-view>
		<tab-bar ref='infoAll'></tab-bar>
	</view>
</template>

<script>
	import {
		systemNoticeGetNoticeList
	} from '@/api/basicsModules/index.js'
	// #ifdef MP-WEIXIN
	import {
		tabBar
	} from '@/component/tabBar.vue'
	// #endif
	export default {
		// #ifdef MP-WEIXIN
		components: {
			tabBar
		},
		// #endif
		// #ifdef H5
		components: {
			"tabBar": () => import('@/component/tabBar.vue'),
		},
		// #endif
		data() {
			return {
				queryParams: {
					page: 1,
					pageSize: 20,
				},
				total: 0,
				dataList: [],
			}
		},
		onLoad() {

		},
		onShow() {

		},
		mounted() {
			this.getList();
		},
		methods: {
			//滚动事件
			scrollGet() {
				let self = this;
				if (self.total / self.queryParams.pageSize <= self.queryParams.page) {
					console.log('没有更多数据!')
				} else {
					setTimeout(function() {
						self.queryParams.page += 1;
						self.getList();
					}, 1000)

				}

			},
			//获取列表数据
			async getList() {
				let self = this;
				const {
					data
				} = await systemNoticeGetNoticeList(this.queryParams);
				if (data.code == 200) {
					this.dataList = [...this.dataList, ...data.data.records]
					this.total = data.data.total;
				}
			},
			formatDate(date) {
				let newDate = new Date(date);
				let YY = newDate.getFullYear() + '-';
				let MM = (newDate.getMonth() + 1 < 10 ? '0' + (newDate.getMonth() + 1) : newDate.getMonth() + 1) + '-';
				let DD = (newDate.getDate() < 10 ? '0' + (newDate.getDate()) : newDate.getDate());
				return YY + MM + DD;
			},
		}
	}
</script>

<style lang="stylus" scoped>
	#information {
		height: 100%;

		display flex;
		background #fff;

		.info-max-box {
			flex: 1;
			overflow: scroll;
			padding-bottom: 100rpx;
			background #fff;
			margin: 0 20rpx;

			.for-info-box:nth-child(1) {
				border: none;
			}

			.for-info-box {
				height: 150rpx;
				border-top: 1rpx solid #F5F5F5;

				display flex;

				img {
					border-radius: 50%;
					margin: 25rpx 28rpx 25rpx 20rpx;
					width: 100rpx;
					height: 100rpx;
				}

				.right-box {
					flex: 1;

					.top-box {
						display flex;
						line-height: 67rpx;
						margin-top: 7rpx;

						view:nth-child(1) {
							font-size: 30rpx;
							color: #333333;
							margin-right: 28rpx;
						}

						view:nth-child(2) {

							font-size: 24rpx;
							color: #CCCCCC;
							flex: 1;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;


						}

						view:nth-child(3) {
							font-size: 20rpx;
							color: #CCCCCC;
							text-align right;
						}
					}

					.bottom {
						width: 530rpx;
						line-height: 62rpx;
						font-size: 25rpx;
						color: #666666;
						display block;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}
			}

			.get-null-box {
				height: 100rpx;
				line-height: 100rpx;
				color: #999;
				text-align center
			}
		}
	}
</style>