list.uvue

<template>
	<view style="width: 100%;height: 100%;">
		<view class="banner">
			<image class="banner-img" :src="banner.cover"></image>
			<text class="banner-title">{{ banner.title }}</text>
		</view>
		<list class="uni-list" refresher-enabled=true @refresherrefresh="onRefresherrefresh"
			:refresher-triggered="refresherTriggered">
			<cell v-for="(value, index) in listData" :key="index">
				<view class="uni-list-cell" hover-class="uni-list-cell-hover" @click="goDetail(value)">
					<view class="uni-media-list">
						<image class="uni-media-list-logo" :src="value.cover"></image>
						<view class="uni-media-list-body">
							<text class="uni-media-list-text-top">{{ value.title }}</text>
							<view class="uni-media-list-text-bottom">
								<text class="uni-media-list-text">{{ value.author_name }}</text>
								<text class="uni-media-list-text">{{ value.published_at }}</text>
							</view>
						</view>
					</view>
				</view>
			</cell>
			<cell class="footer"></cell>
			
		</list>
	</view>
</template>

<script>
	import JSONObject from 'com.alibaba.fastjson.JSONObject';
	import JSONArray from 'com.alibaba.fastjson.JSONArray';
	type Banner = {
		cover: string | null,
		title: string | null,
	}
	type Item = {
		author_name: string,
		cover: string,
		id: number,
		post_id: string,
		published_at: string,
		title: string
	}


	export default {
		data() {
			return {
				refresherTriggered: false,
				banner: {} as Banner,
				listData: [] as Item[],
				last_id: '',
				reload: false,
				status: 'more',
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多'
				},
				pageVisible: false
			};
		},
		onLoad() {
			this.pageVisible = true;
			this.getBanner();
			this.getList();
		},
		onUnload() {
			this.pageVisible = false;
		},
		methods: {
			getBanner() {
				let data = {
					column: 'id,post_id,title,author_name,cover,published_at' //需要的字段名
				};
				uni.request({
					url: 'https://unidemo.dcloud.net.cn/api/banner/36kr',
					data: data,
					success: data => {
						// uni.stopPullDownRefresh();
						this.refresherTriggered = false
						if (data.statusCode == 200) {
							let result = data.data as UTSJSONObject;
							this.banner = {
								cover: result["cover"] as string,
								title: result["title"] as string
							} as Banner;
						}
					},
					fail: (e) => {
						console.log('fail', e);
					}
				});
			},
			getList() {
				let data = {
					column: 'id,post_id,title,author_name,cover,published_at', //需要的字段名
				};
				if (this.last_id != "") {
					//说明已有数据，目前处于上拉加载
					this.status = 'loading';
					data["minId"] = this.last_id;
					data["time"] = new Date().getTime() + '';
					data["pageSize"] = 10;
				}
				uni.request({
					url: 'https://unidemo.dcloud.net.cn/api/news',
					data: data,
					success: (data) => {
						if (data.statusCode == 200) {
							const result = data.data as UTSJSONObject
							let list = this.setTime(result);
							this.listData = this.reload ? list : this.listData.concat(list);
							this.last_id = list[list.length - 1].id + "";
							this.reload = false;
							this.refresherTriggered = false
						}
					},
					fail: (res) => {
						console.log('fail', res);
						this.refresherTriggered = false
					}
				});
			},
			goDetail(e: Item) {
				const detail = e;
				const post_id = detail.post_id;
				const cover = detail.cover;
				const title = detail.title;
				uni.navigateTo({
					url: 'pages/component/list/detail/detail?post_id=' + post_id + "&cover=" + cover + "&title=" + title
				});
			},
			setTime(items: UTSJSONObject): Item[] {
				let newItems = [] as Item[];
				if (items.isJSONArray()) {
					const array = items.toJSONObject() as JSONArray;
					for (let i = 0; i < array.size - 1; i++) {
						const e = array.get(i) as JSONObject;
						newItems.push({
								author_name: e["author_name"] as string,
								cover: e["cover"] as string,
								id: e["id"] as number,
								post_id: e["post_id"] as string,
								published_at: e["published_at"] as string,
								title: e["title"] as string
							} as Item);
					}
				}
				return newItems;
			},
			onRefresherrefresh() {
				this.refresherTriggered = true
				this.reload = true;
				this.last_id = '';
				this.getBanner();
				this.getList();
			}
		}
	};
</script>

<style>
	.banner {
		height: 360rpx;
		overflow: hidden;
		position: relative;
		background-color: #ccc;
	}

	.banner-img {
		width: 100%;
	}

	.banner-title {
		max-height: 84rpx;
		overflow: hidden;
		position: absolute;
		left: 30rpx;
		bottom: 30rpx;
		width: 90%;
		font-size: 32rpx;
		font-weight: 400;
		line-height: 42rpx;
		color: white;
		z-index: 11;
	}

	.uni-media-list {
		padding: 22rpx 30rpx;
		box-sizing: border-box;
		display: flex;
		width: 100%;
		flex-direction: row;
	}

	.uni-media-list-logo {
		width: 180rpx;
		height: 140rpx;
	}

	.uni-media-list-body {
		flex: 1;
		padding-left: 15rpx;
		justify-content: space-around;
	}

	.uni-media-list-text-top {
		/* height: 74rpx; */
		font-size: 28rpx;
		lines:2;
		overflow: hidden;
	}

	.uni-media-list-text-bottom {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	
	.uni-media-list-text {
		color: #9D9D9F;
		font-size: 25rpx;
	}
</style>