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() {
			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>