hz-zhhq-app/pages/medical/news.vue

<template>
	<view class="container">
		<view class="list-view">
			<view v-for="(item, index) in newsList" :key="index"
				class="list-cell list-item"
				:class="[newsList.length - 1 == index ? 'last' : '']"
				hover-class="hover"
				:hover-stay-time="150"
				@tap="detail"
			>
				<view class="cell-title-box" :class="[item.img == 0 ? '' : 'min']">
					<view class="cell-title" :class="[item.img == 0 ? 'pdr0' : '']">{{ item.title }}</view>
					<image :src="'../../static/test/' + item.img + '.jpg'" class="img" v-if="item.img != 0"></image>
				</view>
				<view class="sub-title">
					<text class="tag" :class="[getLabelCss(item.label)]" v-if="item.label != 0">{{ getLabelText(item.label) }}</text>
					<text class="sub-content">{{ item.source }}</text>
				</view>
			</view>
		</view>
		<!--加载loadding-->
		<tui-loadmore :visible="loadding"></tui-loadmore>
		<tui-nomore :visible="!pullUpOn"></tui-nomore>
		<!--加载loadding-->
	</view>
</template>

<script>
import tuiLoadmore from '@/components/loadmore/loadmore';
import tuiNomore from '@/components/nomore/nomore';
export default {
	components: {
		tuiLoadmore,
		tuiNomore
	},
	data() {
		return {
			pageIndex: 1,
			newsList: [
				{
					id:1,
					title: '头发爱出油还有着掉发的问题怎么回事这几个方法教你脱节',
					img: 'toufa',
					source: '中国健康知识网',
					label: 1
				},

				{
					id:2,
					title: '头发应该怎么养护？',
					img: "toufa2",
					source: '医学教育网',
					label: 1
				},
				{
					id:3,
					title: '亚健康是什么？怎么界定？',
					img: 0,
					source: '医学百科',
					label: 0
				},

				{
					id:4,
					title: '快春节了学会肘子的这个做法香而不腻春节给家人露一手',
					img: "shiwu",
					source: '中国健康知识网',
					label: 1
				},
				{
					id:5,
					title: '日常饮食几大基本原则',
					img: 0,
					source: '常识',
					label: 2
				},
				{
					id:6,
					title: '整形日益低龄化，人大代表建议禁止未成年人整容',
					img: 1,
					source: '养生网',
					label: 0
				},
				{
					id:7,
					title: '什么是甲状腺炎专家有4种类型可不是发炎那么简略',
					img: 2,
					source: '百科故事大全',
					label: 4
				}
			],
			loadding: false,
			pullUpOn: false
		};
	},
	methods: {
		detail(e) {
			uni.navigateTo({
				url: '/pages/medical/newsDetail/newsDetail'
			});
		},
		getLabelText: function(label) {
			return ['', '健康知识', '生活小贴士', '都看过'][label];
		},
		getLabelCss: function(label) {
			return ['', 'b-red', 'b-blue', 'b-orange', 'b-green'][label];
		}
	},
	//页面相关事件处理函数--监听用户下拉动作
	onPullDownRefresh: function() {
		// //延时为了看效果
		// setTimeout(() => {
		// 	this.newsList = this.loadData;
		// 	this.pageIndex = 1;
		// 	this.pullUpOn = true;
		// 	this.loadding = false;
		// 	uni.stopPullDownRefresh();
		// 	this.tui.toast('刷新成功');
		// }, 200);
	},

	// 页面上拉触底事件的处理函数
	onReachBottom: function() {
		// if (!this.pullUpOn) return;
		// this.loadding = true;
		// if (this.pageIndex == 3) {
		// 	this.loadding = false;
		// 	this.pullUpOn = false;
		// } else {
		// 	this.newsList = this.newsList.concat(this.loadData);
		// 	this.pageIndex = this.pageIndex + 1;
		// }
	}
};
</script>

<style>
.container {
	padding-bottom: env(safe-area-inset-bottom);
}

.list-view {
	width: 100%;
	background: #fff;
	box-sizing: border-box;
}

.list-cell {
	padding: 30upx 32upx;
	box-sizing: border-box;
}

.cell-title-box {
	position: relative;
}

.min {
	min-height: 90upx;
}

.cell-title {
	padding-right: 172upx;
	font-size: 36upx;
	line-height: 56upx;
	word-break: break-all;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

.pdr0 {
	padding-right: 0 !important;
}

.img {
	position: absolute;
	right: 0;
	top: 6upx;
	width: 146upx;
	height: 146upx;
	border-radius: 4upx;
}

.sub-title {
	padding-top: 24upx;
	font-size: 28upx;
	color: #bcbcbc;
	display: flex;
	align-items: center;
}

.tag {
	padding: 5upx 10upx;
	font-size: 24upx;
	border-radius: 4upx;
	margin-right: 20upx;
}

.b-red {
	background: #fcebef;
	color: #8a5966;
}

.b-blue {
	background: #ecf6fd;
	color: #4dabeb;
}

.b-orange {
	background: #fef5eb;
	color: #faa851;
}

.b-green {
	background: #e8f6e8;
	color: #44cf85;
}
</style>