kailin_mp/pages/article/index.vue

<template>
	<view>
		<view class="article_list">
			<view class="article_item" v-for="(item,index) in articleList" @click.stop="goDetail(item.id)">
				<image class="thumb_img" :src="item.thumb" mode="aspectFit"></image>
				<view class="article_info">
					<view class="article_title">{{item.title}}</view>
					<view class="article_census">
						<text class="">阅读：{{item.read_count}}</text> <text class="">点赞：{{item.hand_count}}</text>
					</view>
					<view class="article_time">{{item.insert_time}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
		  return {
		    // 产品列表
		    articleList: [],
		    // 请求参数
		    requestParam: {
		      page: 1,
		      status: 0,
		    },
		    // 是否最后一页
		    isLast: false,
		    // 是否请求中
		    isReqing: false,
		  };
		},
		onLoad() {},
		onShow() {
		  // 没有数据的话，或者请求中，不允许刷新
		  if (this.isReqing) return;
		  // 初始化页码为1
		  this.requestParam.page = 1;
		  // 是否是最后一页
		  this.isLast = false;
		  // 设置请求中
		  this.isReqing = true;
		  // 请求列表
		  this.$http.request("api/article/get_list", this.requestParam).then((re) => {
		    // 设置非请求中
		    this.isReqing = false;
		    // 成功结果
		    if (re.code == "success") {
		      if (re.data.last_page <= this.requestParam.page) this.isLast = true;
		      this.articleList = re.data.data;
		    }
		  });
		},
		onPullDownRefresh() {
		  // 如果请求中，不允许请求，
		  if (this.isReqing) return false;
		  // 初始化页码为1
		  this.requestParam.page = 1;
		  // 是否是最后一页
		  this.isLast = false;
		  // 设置请求中
		  this.isReqing = true;
		  // 请求列表
		  this.$http.request("api/article/get_list", this.requestParam).then((re) => {
		    // 设置非请求中
		    this.isReqing = false;
		    // 成功结果
		    if (re.code == "success") {
		      if (re.data.last_page <= this.requestParam.page) this.isLast = true;
		      this.articleList = re.data.data;
		    }
		  });
		  uni.stopPullDownRefresh();
		},
		onReachBottom() {
		  // 如果页码是0，避免第一页重复
		  if (this.requestParam.page < 1) return;
		  // 最后一页不请求
		  if (this.isLast) return;
		  // 请求中，不再请求
		  if (this.isReqing) return;
		  // 增加一页
		  this.requestParam.page = this.requestParam.page + 1;
		  // 设置请求中
		  this.isReqing = true;
		  // 请求列表
		  this.$http.request("api/article/get_list", this.requestParam).then((re) => {
		    // 设置非请求中
		    this.isReqing = false;
		    // 成功结果
		    if (re.code == "success") {
			  // 数据
		      if (re.data.last_page <= this.requestParam.page) this.isLast = true;
		      // 追加数据
		      this.articleList.push(...re.data.data);
		    }
		  });
		},
		methods: {
			goDetail(id) {
			  uni.navigateTo({
			    url: "/pages/article/detail?id=" + id,
			  });
			},
		}
	}
</script>

<style lang="less">
	.article_list{
		float: left;
		width: 750rpx;
		display: block;
		overflow: hidden;
		.article_item{
			display: block;
			width: 700rpx;
			height: 200rpx;
			overflow: hidden;
			margin-bottom: 10rpx;
			padding: 20rpx 25rpx;
			border-radius: 10rpx;
			background-color: #FFFFFF;
			.thumb_img{
				float: left;
				width: 200rpx;
				height: 200rpx;
				display: block;
				border-radius: 10rpx;
			}
			.article_info{
				float: right;
				width: 480rpx;
				display: block;
				margin-left: 20rpx;
				.article_title{
					width: 480rpx;
					display: block;
					height: 120rpx;
					font-size: 34rpx;
					overflow: hidden;
					font-weight: bold;
					line-height: 40rpx;
					text-overflow: ellipsis;
				}
				.article_census{
					color: #999999;
					width: 480rpx;
					display: block;
					height: 40rpx;
					font-size: 26rpx;
					line-height: 40rpx;
					text:nth-child(2){
						margin-left: 20rpx;
					}
				}
				.article_time{
					color: #999999;
					width: 480rpx;
					display: block;
					height: 60rpx;
					font-size: 26rpx;
					text-align: right;
					line-height: 60rpx;
				}
			}
		}
	}
</style>