long-list.uvue

<template>
	<view style="width: 100%;height: 100%;">
		<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.img"></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.subTitle }}</text>
							</view>
						</view>
					</view>
				</view>
			</cell>
		</list>
	</view>
</template>

<script>
import JSONObject from 'com.alibaba.fastjson.JSONObject';
	type Item = {
		title: string
		subTitle: string,
		img: string,
		detail: string,
	}


	export default {
		data() {
			return {
				refresherTriggered: false,
				listData: [] as Item[],
				last_id: '',
				pageVisible: false
			};
		},
		onLoad() {
			this.pageVisible = true;
			this.getList();
		},
		onUnload() {
			this.pageVisible = false;
		},
		methods: {
			getList() {
				const content = UTSAndroid.getFileContent("static/list-mock/mock.json");
				if (content != null){
					const items = [] as Item[];
					const jsonArr = JSON.parse(content);
					jsonArr?.forEach((res)=>{
						const json = res as JSONObject;
						const title = json["title"] as string;
						const subTitle = json["subTitle"] as string;
						const img = json["img"] as string;
						const detail = json["detail"] as string;
						const item:Item = {
							title,
							subTitle,
							img,
							detail
						}
						items.push(item);
					})
					let temp = [] as Item[];
					for(let i = 0; i < 100; i++){
						temp = temp.concat(items);
					}
					listData = temp;
				}
				
				setTimeout(()=>{
					this.refresherTriggered = false
				},0);
			},
			goDetail(e: Item) {
				uni.navigateTo({
					url: 'pages/component/long-list/detail/detail?content=' + e.detail
				});
			},
			onRefresherrefresh() {
				if(this.pageVisible){
					this.refresherTriggered = true
					this.getList();
				}
			}
		}
	};
</script>

<style>
	.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;
	}

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

	.uni-media-list-text-bottom {
		display: flex;
		margin-top: 10rpx;
	}
	
	.uni-media-list-text {
		color: #9D9D9F;
		font-size: 25rpx;
	}
</style>