equipment-rental-mini/pages/notice-list/notice-list.vue

<template>
	<view style="padding:30rpx 0 0 0;height: 100vh;box-sizing: border-box;">
		<u-list @scrolltolower="scrolltolower" class="notice-ul" height="100%">
			<u-list-item  v-for="data in noticeData" :key="data.noticeId">
				<view class="notice-area"  @click="toNotice(data.noticeId)">
					<view class="area-header">
						<view style="width: 100%;display: flex;">
							<i class="iconfont icon-tongzhi"></i>
							<text 
							style="width: 100%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
							{{data.noticeTitle}}
							</text>
						</view>
						<text class="up-date">分布时间：{{data.updateTime}}</text>
					</view>
					<view class="area-content">
						<rich-text 
						:nodes="data.noticeContent" 
						style="overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;line-height: 68rpx;font-size: 32rpx;">
						</rich-text>
					</view>
				</view>
			</u-list-item>
			<u-list-item v-if="textShow">
				<view style="text-align: center;margin-bottom: 30rpx;">
					已加载全部通知
				</view>
			</u-list-item>
		</u-list>
		
	</view>
</template>

<script>
	import { getNewInform } from '@/api/notice.js'
	export default {
		data() {
			return {
				noticeData:[],
				page:1,
				total:6,
				pageSize:5,
				textShow:false
			};
		},
		methods:{
			toNotice(id){
				uni.navigateTo({
					url:'/pages/notice/notice?id='+id,
				})
			},
			handleDate(val){
				let date = new Date(val)
				let year = date.getFullYear()
				let month = date.getMonth()+1
				let day = date.getDate()
				return year+"-"+month+"-"+day;
			},
			scrolltolower(){
				if(Math.ceil(this.total/this.pageSize)<this.page){
					return;
				}else if(Math.ceil(this.total/this.pageSize)>=this.page){
					this.getNoticeList(this.page,this.pageSize)
				}
			},
			getNoticeList(x,y){
				const that = this
				uni.showLoading({
					icon:"none",
					title:"记载中"
				})
				try{
					getNewInform(x,y).then(res=>{
						uni.hideLoading()
						if(res.data.rows){
							if(that.page===1){
								that.noticeData = res.data.rows
							}else{
								that.noticeData = [...that.noticeData,...res.data.rows]
							}
							that.total = res.data.total
							that.page = that.page +1
							if(Math.ceil(that.total/that.pageSize)<that.page){
								that.textShow = true
							}else{
								that.textShow = false
							}
						}
					})
				}catch(err){
					uni.hideLoading()
				}
				
			}
		},
		onLoad() {
			this.getNoticeList(1,this.pageSize)
		}
	}
</script>

<style lang="scss">
page{
	background-color: #f5f6fa;height: 100%;
}
.notice-area{
	background-color: #fff;
	margin: 0rpx 25rpx 30rpx 25rpx;
	padding: 30rpx 32rpx;
	border-radius: 30rpx;
	box-shadow: 0px 0px 21px 0px rgba(241, 241, 241, 1);
	.area-header{
		padding-bottom: 10rpx;
		font-size: $uni-title-font-size;
		font-weight: 500;
		color: #323232;
		i{
			font-size: 50rpx;
			padding-right: 10rpx;
			color: #228ff6;
		}
		.up-date{
			color: #9b9b9b;
			font-size: 26rpx;
			font-weight: 500;
		}
	}
	.area-content{
		padding-top: 10rpx;
	}
}
</style>