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'
    import { tabBar } from '@/components/tabBar.vue'
	export default {
        components: {
            tabBar
        },
		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>