jp-zeroWorkerStation/pages/packages/news/news.vue

<template>
	<view>
		<u-navbar :back-text="title" back-icon-size="28" back-icon-color="#ffffff"
			:background="{backgroundColor: '#2795FD',}" :back-text-style="{color: '#ffffff'}"></u-navbar>
		<view class="main">
			<view class="news-item" v-for="(item,i) in list"  :key="i"
			@click="gotoUrl('pages/packages/news/articleDetail?id='+item.id)">
				<view class="content">
					<view class="title">
						{{item.title}}
					</view>
					<view class="tags">
						<view class="classify">
							{{item.categoryN}}
						</view>
						<view class="date">
							{{item.createTime.substring(0,10)}}
						</view>
					</view>
				</view>
				<view class="picture">
					 <img :src="item.thumbnailImage" alt="">
				</view>
			</view>
		</view>
		<u-divider v-if="list.length==recordsTotal"
		  :isnone="list.length==0" nonetext="没有找到相关内容" 
		 bg-color="#fff" margin-top="20" border-color="#CFD2D5">已经到底了</u-divider>
	</view>
</template>

<script>
	import * as API from '@/apis/pagejs/packages.js'
	export default {
		data() {
			return {
				title:"",
				type:"",
				
				list:[],
				recordsTotal: 0,
				listFrom:{
					pageIndex: 1,
					pageSize: 20,
				
				}
			}
		},
		onLoad(op) {
			this.title=op.title
			this.type=op.t
			this.getList();
		},
		onReachBottom() {
			 
			if (this.list.length < this.recordsTotal) {
				this.myLoadmore();
			}
		},
		methods: {
			myLoadmore(){
				this.listFrom.pageIndex += 1;
				this.getList();
			},
			getList(){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.newsList({
					category:this.type,
					pageSize:this.listFrom.pageSize,
					pageIndex:this.listFrom.pageIndex,
				}).then((res) => {
					uni.hideLoading();
					
					if (this.listFrom.pageIndex == 1) {
						this.list = res.data.data;
					} else {
						this.list = [
							...this.list,
							...res.data.data
						];
					}
					
					this.recordsTotal=res.data.recordsTotal;
				}).catch(error => {
					uni.showToast({icon: 'none',
						title: error,
						icon: "none"
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		padding-bottom: 120px;
	}
	.main{
		padding: 24rpx 32rpx;
		.news-item{
			display: flex;
			height: auto;
			margin-bottom: 40rpx;
			.content{
				width: 526rpx;
				margin-right: 24rpx;
			    display: flex;
				flex-direction: column;
				justify-content: space-between;
				.title{
					color: rgba(51, 51, 51, 1);
					font-size: 16px;
					text-align: justify;
					line-height: 48rpx;
				}
				.tags{
					display: flex;
					justify-content: space-between;
					.classify{
						color: rgba(39, 149, 253, 1);
					}
					.date{
						color: rgba(153, 153, 153, 1);
						font-size: 24rpx;
					}
				}
			}
			.picture{
				width: 224rpx;
				height: 172rpx;
				border-radius: 4px;
				img{
					width: 224rpx;
					height: 172rpx;
				}
			}
		}
		
	}

</style>