jp-xqjy/pages/news/index.vue

<template>
	<view>
		<u-navbar :is-back="false"><view class="navbar-tit">资讯</view></u-navbar>
		<view class="home-head">
			<view class="homeTab">
				<u-tabs :list="tabList" :current="current" @change="change" :show-bar="false" active-color="#333" inactive-color="#c4c0c0"></u-tabs>
			</view>
		</view>
		<view class="homeWrap">
			<u-swiper :list="wrapList" height="300" border-radius="24"></u-swiper>
		</view>
		<view class="newsList">
			<view class="newsList-item" 
				 @click="gotoUrl('pages/news/detalis?id='+item.id)"
				v-for="(item ,index) in list" :key="item.id" >
				<view class="newsList-text">
					<h4 class="u-line-2" v-html="item.content">
						
					</h4>
					<p>{{item.createTime}}</p>
				</view>
				<u-image class="newsList-img" :src="item.images" height="150" width="200" border-radius="10"></u-image>
			</view>
		
			
			<u-divider color="#B6BDC3"  v-if="list.length ==recordsTotal" style="margin-top:20px;">已经到底了</u-divider>
		</view>
 	</view>
</template>

<script>
	import * as API from '@/apis/news.js'
	
	export default {
		data() {
			return {
				form:{
					
				},
				newstype:'',
				typelist: [],
				pageIndex: 1,
				recordsTotal: 0,
				list: [],
				tabList: [{
					name: '通知公告'
				}, {
					name: '活动报道'
				},{
					name: '婚恋课堂'
				},{
					name: '问题解答'
				}],
				current: 0,
				wrapList: [{
						image: '/static/img/banner.png',
					},
					{
						image: '/static/img/banner.png',
					},
					{
						image: '/static/img/banner.png',
					}
				],
			}
		},
		onReachBottom() {
			if (this.list.length < this.recordsTotal) {
				
				this.myLoadmore();
			}
		},
		
		methods: {
			getType() {
				
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				this.pageIndex = 1;
			
				API.newsTypeList().then((res) => {
					
					this.tabList = res.data;
					if(this.tabList.length){
						this.newstype=this.tabList[0]	
					}
					this.getList()
 					uni.hideLoading()
					
				}).catch(error => {
					uni.showToast({
					
						title: error
					})
				})
			},
			getList(bl) {
				
				if(this.newstype==""){
					return
				}
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				if (bl) {
					this.list = [];
					this.pageIndex = 1;
				}
				var data = {
					type:this.newstype.shortName,
					pageSize:5,
					pageIndex: this.pageIndex
				};
				API.newscontent(data).then((res) => {
					
					this.list = [
						...this.list,
						...res.data.data
					];
					this.recordsTotal = res.data.recordsTotal
					uni.hideLoading()
					
				}).catch(error => {
					uni.showToast({
					
						title: error
					})
				})
			},
			
			
			myLoadmore() {
					
				this.pageIndex += 1;
				this.getList()
			},
			change(index) {
				this.current = index;
				if(this.tabList.length){
					this.newstype=this.tabList[index]
				}
				this.getList(true)
			},
			onReady() {
			
				this.getType()
				
			}
		},
		
	}
</script>

<style lang="scss" scoped>
	.navbar-tit{
		padding-left:15px;
		font-size: 24px;
	}
	.home-head{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-right: 15px;  
		.homeAdd{
			color: #FF5E5E;
			span{
				margin-left: 3px;
			}
		}
	}
	.homeWrap{
		padding:0 15px;
	}
	.newsList{
		padding: 15px;
		.newsList-item{
			display: flex;
			margin-bottom: 24px;
			.newsList-text{
				flex: 1;
				min-width: 0;
				margin-right: 10px;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				h4{
					font-weight: normal;
				}
				p{
					color: #999;
					font-size: 12px;
				}
			}
		}
	}
</style>