hssred/pages/index/love.vue

<template>
	<view class="content">
		<view class="lists">
			<view >
				<view class="list flex topp">
					<text class="">捐赠方</text>
					<text>捐赠金额</text>
					<text>捐赠日期</text>
					<text>捐赠意向</text>
				</view>
			</view>
			<view :class="{ top: animate == true }">
				<view class="list flex" v-for="(item,index) in loveList" :key="index">
					<text class="shabi clamp">{{item.name || '佚名'}}</text>
					<text class="shabi2 clamp">{{item.amount }}</text>
					<text class=" clamp">{{item.paytime | getTime}}</text>
					<text class="shabi clamp">{{item.order_name}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		loveList
	} from '@/api/index.js';
	export default {
		data() {
			return {
				animate: false,
				timer: null,
				loveList: [],
				page: 1,
				limit: 100,
				loaded: false,
				loadingType: 'more'
			}
		},
		methods: {
			scroll() {
				this.animate = true;
				setTimeout(() => {
					this.loveList.push(this.loveList[0]);
					this.loveList.shift();
					this.animate = false;
				}, 1000);
			},
			getLoveList() {
				let obj = this
				if (obj.loadingType == 'noMore' || obj.loadingType == 'loading') {
					return
				}
				obj.loadingType = 'loading'
				loveList({
					page: obj.page,
					limit: obj.limit
				}).then(({
					data
				}) => {
					obj.loveList = obj.loveList.concat(data.data)
					if (obj.limit == data.data.length) {
						obj.page++
						obj.loadingType = 'more'
					} else {
						obj.loadingType = 'noMore'
					}
					obj.loaded = true
					obj.timer = setInterval(this.scroll, 2000);
				})
			}
		},
		filters: {
			getTime(val) {
				let date = new Date(val * 1000);
				let Y = date.getFullYear();
				let M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
				let D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
				return Y + '/' + M + '/' + D;
			},
		},
		onLoad() {
			
		},
		onReachBottom() {
		},
		onShow() {
			this.getLoveList()
		}
	}

</script>

<style lang="less">
		.content{
			display: flex;
			// height: 100vh;
			color: #ed4530;
			// padding: 0 30rpx;
		}
		.topp {
			background-color:#fef5f1;
			z-index: 999;
			position: fixed;
			top: 0;
			width: 100%;
			background-color: #ed4530;
			color: #fef5f1;
		}
		.lists{
			background-color: #fef5f1;
			// height: 500rpx;
			overflow: hidden;
			width: 100%;
			text-align: center;
		}
		.list{
			height: 50px;
			display: flex;
			align-items: center;
			font-size: 14px;
			border-bottom: 1px solid #ed4530;
		}
		text{
			line-height: 50px;
			height: 100%;
			padding-left: 20rpx;
			width: 25%;
			flex-grow: 1;
			border: 1px solid #fef5f1;
		}
		.top {
		    transition: all 1s;
		    margin-top: -50px;
		  }
	.shabi {
		border-left: #ed4530 1px solid;
		border-right: #ed4530 1px solid;
	}
	.shabi2 {
		border-right: #ed4530 1px solid;
	}
</style>