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 { readFile, ReadFileOptions,ReadFileSuccessResult } from '@/uni_modules/uts-file-manager';
	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() {
                readFile({
					type:'text',
					path:'static/list-mock/mock.json',
					success:function(result:ReadFileSuccessResult){
						const content = result.content;
						if (content != null){
							const items = [] as Item[];
							const jsonArr = JSON.parse(content);
							jsonArr?.forEach((res)=>{
								const json = res as UTSJSONObject;
								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);
					},
					complete:function(_){
						
					}
				} as ReadFileOptions)
			},
			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>