ezpc/src/views/popularScience/List.vue

<template>
	<div class="list">
		<div class="wrapper">
			<div class="tip"  v-for="item in tipList" :key="item.id" @click="tipClick(item.id)">
				<img :src="item.image_input[0]" />
				<div class="info hand">
					<div class="title clamp">{{item.title}}</div>
					<div class="content clamp">{{item.synopsis}}</div>
					<div class="num">{{item.visit}}人已观看</div>
				</div>
			</div>
			<el-pagination layout="prev, pager, next" :total="total" background prev-text="上一页" next-text="下一页" @current-change="currentChange" :page-size="limit"></el-pagination>
		</div>
	</div>
</template>

<script>
	import { splist } from '../../request/api.js'
	
	export default {
		data() {
			return {
				tipList: [],
				alllist: [],
				total: 0,
				page: 1,
				limit: 7
			}
		},
		created() {
			this.getAllList()
		},
		methods: {
			tipClick(id) {
				this.$router.push('/popularScience/detail?id=' + id)
			},
			//分页页码改变触发事件
			currentChange(e) {
				console.log(e);
				this.page = e
				this.getList()
			},
			getAllList() {
				let obj = this
				let data = {
					page: this.page,
					limit: this.limit
				}
				splist().then(({data}) => {
					obj.total = data.count
					obj.tipList = data.list
					console.log(obj.total,'obj.total ++++++++++')
				})
			},
			getList() {
				let obj = this
				let data = {
					page: this.page,
					limit: this.limit
				}
				splist(data).then(({data}) => {
					obj.tipList = data.list
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tip{
		width: 815px;
		height: 127px;
		border-bottom: 1px solid #F2F2F2;
		display: flex;
		align-items: center;
		img {
			width: 155px;
			height: 98px;
		}
		.info {
			padding-left: 16px;
			.title {
				padding-top: 5px;
				width: 200px;
				// height: 19px;
				
				font-size: 18px;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
			}
			.content {
				width: 491px;
				height: 16px;
				font-size: 16px;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;
				line-height: 1;
				padding-top: 11px;
			}
			.num {
				margin-top: 24px;
				height: 16px;
				font-size: 16px;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;
				line-height: 27px;
				text-align: right;
			}
		}
	}
	/deep/ .el-pagination {
		margin-top: 50px;
		text-align: center;
	}
</style>