sx/pages/index/artList.vue

<template>
	<view class="content">
		<view class="main">
			<view v-for="(item, index) in list">
				<view class="first" v-if="index == 0" @click="navToList(item.id)">
					<view class="title">{{item.title}}</view>
					<view class="image"><image :src="item.image_input[0]" mode=""></image></view>
					<view class="time">{{item.add_time}}</view>
				</view>
				<view class="item flex" @click="navToList(item.id)" v-else>
					<view class="item-left"><image :src="item.image_input[0]" mode=""></image></view>
					<view class="item-right">
						<view class="item-font clamp">{{item.title}}</view>
						<view class="item-time">{{item.add_time}}</view>
					</view>
				</view>
			</view>
		</view>
		<uni-load-more :status="loadingType"></uni-load-more>
	</view>
</template>

<script>
import { article } from '@/api/user.js';
export default {
	data() {
		return {
			list: [],
			page: 1.,
			limit: 10,
			loadingType: 'more'
		};
	},
	onLoad() {
		this.loadData();
	},
	onShareAppMessage(options) {
		// 设置菜单中的转发按钮触发转发事件时的转发内容
		let pages = getCurrentPages(); //获取加载的页面
		let currentPage = pages[pages.length - 1]; //获取当前页面的对象
		let url = currentPage.route; //当前页面url
		let item = currentPage.options; //如果要获取url中所带的参数可以查看options
		let shareObj = {
			title: '水箱计算', // 默认是小程序的名称(可以写slogan等)
			path: url, // 默认是当前页面，必须是以‘/’开头的完整路径
			imageUrl: '',
			success: function(res) {
				// 转发成功之后的回调
				if (res.errMsg == 'shareAppMessage:ok') {}
			},
			fail: function() {
				// 转发失败之后的回调
				if (res.errMsg == 'shareAppMessage:fail cancel') {
					// 用户取消转发
				} else if (res.errMsg == 'shareAppMessage:fail') {
					// 转发失败，其中 detail message 为详细失败信息
				}
			}
		};
		return shareObj;
	},
	methods: {
		// 载入数据
		async loadData() {
			let obj = this;
			if(obj.loadingType == 'noMore' || obj.loadingType == 'loading' ) {
				return
			}
			obj.loadingType = 'loading'
			article({page:obj.page,limit:obj.limit},1).then(({data}) =>{
				obj.list = obj.list.concat(data)
				obj.page++
				if(data.length == obj.limit) {
					obj.loadingType = 'more'
				}else {
					obj.loadingType = 'noMore'
				}
			})
		},
		navToList(id) {
			uni.navigateTo({
				url: '/pages/index/artDetail?id=' + id
			});
		}
	}
};
</script>

<style lang="scss">
page,
.content {
	height: auto;
	min-height: 100%;
	background: #f5f5f5;
}
.main {
	// margin-top: 20rpx;
	background: #ffffff;
	.first {
		padding: 50rpx 0 18rpx;
		margin: 0 22rpx;
		border-bottom: 1px solid #e0e0e0;
		.title {
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
		}
		.image {
			width: 710rpx;
			height: 400rpx;
			background: #eee;
			margin-top: 20rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.time {
			margin-top: 20rpx;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #666666;
		}
	}
	.item {
		padding: 26rpx 0 18rpx;
		margin: 0 22rpx;
		justify-content: flex-start;
		align-items: flex-start;
		border-bottom: 1px solid #e0e0e0;
		.item-left {
			width: 224rpx;
			height: 160rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.item-right {
			width: 458rpx;
			height: 160rpx;
			margin-left: 24rpx;
			padding: 18rpx 0;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			.item-font {
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
			}
			.item-time {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #666666;
			}
		}
	}
}
</style>