zh_order_food_xcx/pages-my/notice/list.vue

<template>
	<view class="notice-list iPhone-bottom flex-common-css box-border-box">
		<Nav title='搜索' bgckgroundBox='#fff'></Nav>

		<scroll-view scroll-y="true" class="scroll-view-css box-border-box p-24" @scrolltolower="scrolltolower">
			<view class="card-box box-border-box p-24" v-for="(item,i) in list" :key="i" @click="toDet(item)">
				<view class="text-overflow-ellipsis fs-32 fw-600 mb-8">{{item.title}}</view>
				<view class="fs-24 fw-400 fc-9 p-b-20 b-b-F9F9F9 mb-24">{{item.created_date}}</view>
				<view class="flex-justify-space align-items-center">
					<view class="fs-28 fw-400 fc-9">查看详情</view>
					<image src="@/static/img/toRight.png" mode=""></image>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		noticeList
	} from '@/api/notice.js';
	export default {
		data() {
			return {
				list: [],
				total: 0,
				page: 1,
			}
		},
		onShow() {},
		mounted() {
			this.page = 1;
			this.list = [];
			this.getList();
		},
		methods: {
			getList() {
				noticeList({
					page: this.page
				}).then((res) => {
					if (res.code === 1) {
						this.list = [...this.list, ...res.data.items];
						this.total = res.data.total;
					}
				})
			},
			scrolltolower() {
				if (this.list.length < this.total) {
					this.page += 1;
					this.getList();
				}
			},
			toDet(item) {
				uni.navigateTo({
					url: '/pages-my/notice/info?id=' + item.id
				})
			},
		},
	}
</script>

<style scoped lang="scss">
	.notice-list {
		.card-box {
			width: 100%;
			min-height: 224rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
		}

		image {
			width: 32rpx;
			height: 32rpx;
		}
	}
</style>