jp-railway/pages/news/news.vue

<template>
	<view>
		<u-navbar :title="title">
			<view class="slot-wrap">
				<u-icon name="search" 
				@click="gotoUrl('pages/search/searchResult?type='+listForm.typeId)"
				size="48" color="#777777"></u-icon>
			</view>	
		</u-navbar>
		
		<view class="news">
			
			<view class="news-item" v-for="(item,i) in list" @click="ckInfo(item.id)" :key="i">
				<view class="content">
					<view class="news-title">
						{{item.title}}
					</view>
					<view class="information">
						<view class="classify">
							{{item.typeName}}
						</view>
						<view class="date">
							{{substrDate(item.createTime)}}
						</view>
						
					</view>
				</view>
				
				<view class="img">
					<img  v-if="item.pic" :src="imgurl+item.pic" alt="">
					<img  v-else src="@/assets/img/default_img.png" alt="">
					
				</view>
				
			</view>
		   </view>
		<u-divider  v-if="list.length==recordsTotal"
		 :isnone="list.length==0" nonetext="没有找到相关内容" 
		border-color="#CFD2D5">已经到底了</u-divider>
	</view>
</template>

<script>
	import * as API from '@/apis/pagejs/news.js'
	
	export default {
		data() {
			return {
				title:"列表",
				list:[],
				listForm:{
					pageIndex:1,
					typeId:"",
					title:"",
					pageSize:20,
				},
				recordsTotal:0,
				imgurl:'',
				
			}
		},
		onLoad(op){
			if(op.title){
				this.title=op.title
			}
			this.listForm.typeId=op.id
			this.getList()
		},
		onReachBottom() {
			if (this.list.length < this.recordsTotal) {			
				this.myLoadmore();
			}
		},
		methods: {
			ckInfo(id){
				var url="/pages/news/articleDetails?id="+id;
				uni.navigateTo({
					url:url
				})
			},
			myLoadmore(){
				this.listForm.pageIndex += 1;
				this.getList();
			},
			getList(){
				
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				
				API.pageList(this.listForm).then((res) => {
					uni.hideLoading();
					this.list = [
						...this.list,
						...res.data.data
					];
					this.recordsTotal = res.data.recordsTotal;
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #ffffff;
		font-family: 'Regular';
	}
	/deep/.u-slot-content {
		display: block;
		text-align: right !important;
		margin-right: 16px;
		color: #333333;
	}
.news{
	padding: 40rpx 32rpx;

  .news-item{
	  display: flex;
	  justify-content: space-between;
	  margin-bottom: 40rpx;
	  	max-height:100px;
	  .content{
		  display: flex;
		  flex-direction: column;
		  justify-content: space-between;
		  .news-title{
			  color: rgba(51, 51, 51, 1);
			  font-size: 16px;
			  text-align: justify;
			  width: 438rpx;
			  // white-space: nowrap;
			  overflow: hidden;
			  text-overflow: ellipsis;
			  font-weight: bold;
		  }
		  
		  .information{
			  margin-top: 8rpx;
			  display: flex;
			  justify-content: space-between;
			  color: #777777;
		  }
	  }
  }
.img{
	width: 224rpx;
	border-radius: 5px;
	overflow: hidden;
	img{
		border-radius: 5px;
        width: 100%;
		height: 100%;
	}
}
}
/deep/.u-divider{
	background-color: #ffffff !important;
	color: rgba(182, 189, 195, 1);
	font-size: 12px;
	font-weight: bold;
}
</style>