xingmingyi_applet/pages/news/news.vue

<template>
	<view id="index">
		<view class="malNotBox">
			<view class="notList dfsb">
				<view class="gogo">
					<view v-for="(val, index) in headList" :key="index" @tap="goList(val.id)" :class="[headSel == val.id ? 'select' : '', 'headli']">{{ val.name }}</view>
				</view>
				<view class="selmore"><uicon color="#666" size="12" @tap="showSel = !showSel" :type="!showSel ? 'iconzixunfenleix' : 'iconzixunshouqix'"></uicon></view>
			</view>
			<view v-if="showSel" class="selLists">
				<view @tap="goList(item.id)" :class="['selList', headSel == item.id ? 'selbtn' : '']" v-for="(item, index) in headList" :key="index">{{ item.name }}</view>
				<view @tap="showSel = false" class="btn">关闭</view>
			</view>
		</view>
		<view class="notCon">
			<newsBox :newsInfo="pageList"></newsBox>
			<view class="nodata" v-if="pageList.length < 1"><u-empty icon-size="200" text="还没有新闻哦" mode="news"></u-empty></view>
			<view class="moredata" v-if="pageList.length > 0"><u-loadmore bg-color="#fff" :status="status" /></view>
		</view>
	</view>
</template>
<script>
import newsBox from 'components/ycommon/newsPage.vue';
export default {
	components: {
		newsBox
	},
	data() {
		return {
			showSel: false, //展示更多选择
			headSel: 0, //tab选择项
			headList: [],
			pageList: [
				// {
				// 	title: '测试标题要长一点哦再来点 随便写点吧',
				// 	name: '我哦',
				// 	hits: 456,
				// 	img: '../../static/images/common/buy-z.png'
				// }
			],
			banner: '',
			page: 1,
			pagenum:6,
			status: 'loadmore'
		};
	},
	onShow() { 
		this.page = 1;
		this.pageList = [];
		this.getCat();
	},
	onReachBottom() {
		if (this.status == 'nomore') return;
		this.status = 'loadmore';
		this.page = ++this.page;
		this.loading();
	},
	methods: {
		//小说 跳转
		toLink(id) {
			uni.navigateTo({
				url: './newsInfo?flag=2&id=' + id
			});
		},
		getCat(){
			this.$api
				.request('index/getNewsCate', { 
				},'get')
				.then(data => {
					console.log(data);
					if (data.code == '200') {
						this.headList = data.data; 
						this.headSel=data.data[0].id
						this.loading();
					} else {
						this.$api.toast(data.msg);
					}
				})
				.catch(function(error) {
					console.log(error);
				});
		},
		loading() {
			this.$api
				.request('news/getNews', {
					nc_id: this.headSel, 
					page: this.page,  
					limit: this.pagenum, 
				},'get')
				.then(data => {
					console.log(data);
					if (data.code == '200') { 
						this.pageList = this.pageList.concat(data.data.list);
						// 数据全部加载完成
						if (data.data.list.length < this.pagenum) {
							  this.status = 'nomore'  
						}
					} else {
						this.$api.toast(data.msg);
					}
				})
				.catch(function(error) {
					console.log(error);
				});
		},
		//子分类下
		goList(id) {
			this.headSel = id;
			this.showSel = false;
			this.page = 1;
			this.pageList = [];
			this.loading();
		}
	}
};
</script>
<style lang="scss" scoped>
#index {
	padding-top: 80rpx;
	min-height: 100vh;
	background-color: #fff;
	.malNotBox {
		background-color: #fff;
		position: fixed;
		top: 0;
		//#ifdef H5
		top: 44px;
		//#endif
		left: 0;
		width: 100%;
		z-index: 80;
		.notList {
			width: 100%;
			padding: 0 30rpx;
			border-bottom: 1rpx solid #eee;
			.selmore {
				height: 60rpx;
				padding-left: 20rpx;
			}
			.gogo {
				flex: 1;
				white-space: nowrap; /*文本不会换行，文本会在在同一行上继续*/
				display: -webkit-box;
				overflow-x: auto;
				/*适应苹果*/
				-webkit-overflow-scrolling: touch;
				//父盒子隐藏滚动条
				&::-webkit-scrollbar {
					display: none;
				} 
				.headli {
					font-family: PingFangSC-Medium;
					height: 60rpx;
					font-size: 28rpx;
					text-align: center;
					margin-right: 60rpx;
					color: #666;
				}
				.select {
					border-radius: 4rpx;
					font-size: 32rpx;
					color: #ae7a58;
					border-bottom: 3px solid #ae7a58;
					font-family: PingFangSC-Semibold, PingFang SC;
					font-weight: 500;
				}
			}
		}
		.selLists {
			position: relative;
			padding: 42rpx 40rpx 400rpx;
			width: 100%;
			height: 100vh;
			background-color: #fff;
			overflow: scroll;
			// box-shadow: 0rpx 2rpx 0rpx 2rpx rgba(0, 0, 0, 0.1);
			.selList {
				float: left;
				min-width: 112rpx;
				padding: 0 30rpx;
				margin: 0 20rpx 40rpx;
				line-height: 50rpx;
				border-radius: 32rpx;
				text-align: center;
				font-size: 28rpx;
				border: 1px solid $prosecond;
				color: $prosecond;
			}
			.selbtn {
				background-color: $prosecond;
				color: #fff;
			}
			.btn {
				position: fixed;
				bottom: 110rpx;
				left: 50%;
				margin-left: -348rpx;
				width: 690rpx;
				text-align: center;
				height: 88rpx;
				line-height: 88rpx;
				border-radius: 44rpx;
				border: 1rpx solid $prosecond;
				font-size: 36rpx;
				color: $prosecond;
				background-color: #fff;
			}
		}
	}
	//#ifndef H5
	.malNotBox {
		top: 0rpx;
		.selLists {
			padding: 42rpx 40rpx 200rpx;
		}
		.btn {
			position: fixed;
			bottom: 10rpx;
		}
		.selmore {
			// position: fixed;
			// top: 12rpx;
		}
	}
	//#endif
	.notBgc {
		margin: 0 auto;
		width: 690rpx;
		height: 314rpx;
		img {
			width: 100%;
			height: 100%;
		}
	}
	.notCon {
		position: relative;
		top: 0rpx;
		margin: 0rpx 30rpx 0rpx;
		z-index: 69;
		background-color: #fff;
		border-radius: 30rpx 30rpx 0 0;
		.van-cell {
			padding: 0;
		}
		.notConPic {
			height: 314rpx;
			width: 100%;
			background-color: #f5f5f5;
			border-radius: 30rpx;
		}
		.van-swipe {
			height: 314rpx;
			width: 100%;
			background-color: #f5f5f5;
			border-radius: 16rpx;
			img {
				width: 100%;
				height: 100%;
			}
		}
		.notConArt {
			border-bottom: 1px solid #ececec;
			padding: 32rpx 0;
			.artTit {
				width: 432rpx;
				.elli {
					width: 432rpx;
					font-size: 32rpx;
					font-weight: 400;
					height: 88rpx;
					line-height: 44rpx;
					text-overflow: -o-ellipsis-lastline;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					line-clamp: 2;
					-webkit-box-orient: vertical;
					margin-bottom: 20rpx;
				}
				.user {
					.graytext {
						line-height: 40rpx;
					}
					image {
						width: 25rpx;
						height: 20rpx;
						margin: 0 10rpx 0 30rpx;
					}
				}
			}
			.artImg {
				width: 228rpx;
				height: 148rpx;
				border-radius: 16rpx;
				background-color: #e5e5e5;
			}
		}
	}
	.dataok {
		margin-top: 40rpx;
	}
}
</style>