uniapp实现XX列表触底加载

最新推荐文章于 2024-12-16 18:43:03 发布

原创最新推荐文章于 2024-12-16 18:43:03 发布 · 1k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序

案例专栏收录该内容

6 篇文章

订阅专栏

本文档展示了HTML模板、Vue.js代码和CSS样式，用于列表形式呈现积分兑换与消费的详细情况，包括用户账号、交易状态、支付/消费金额等关键信息。

不说废话直接上图、上代码

1.html部分：

<template>
	<view class="content integral">
		<view class="integral-list" v-for="(item,index) in recordlist" :key="index">
			<view class="integral-list-header">
				<view class="integral-list-header-account">{{item.memberAccount||'XX科技'}}</view>
				<view class="integral-list-header-points" v-if="item.points>0">
					+{{item.points}}
				</view>
				<view class="integral-list-header-points green" v-if="item.points<=0">
					{{item.points}}
				</view>
			</view>
			<template v-if="item.points>0">
				<view class="integral-list-main">
					<view class="integral-list-main-list">
						<view>结果状态</view>
						<view>{{item.status?'成功':'失败'}}</view>
					</view>
					<view class="integral-list-main-list">
						<view>用户账号</view>
						<view>{{item.memberAccount||'XX科技'}}</view>
					</view>
					<view class="integral-list-main-list">
						<view>支付时间</view>
						<view>{{item.exDate}}</view>
					</view>
					<view class="integral-list-main-list">
						<view>支付方式</view>
						<view>{{item.type.split('-')[1]}}</view>
					</view>
					<view class="integral-list-main-list">
						<view>交易编号</view>
						<view>{{item.id}}</view>
					</view>
				</view>
			</template>
			<template v-if="item.points<=0">
				<view class="integral-list-main">
					<view class="integral-list-main-list">
						<view>结果状态</view>
						<view>{{item.status?'成功':'失败'}}</view>
					</view>
					<view class="integral-list-main-list">
						<view>用户账号</view>
						<view>{{item.memberAccount||'XX科技'}}</view>
					</view>
					<view class="integral-list-main-list">
						<view>消费金额</view>
						<view>{{item.points}}</view>
					</view>
					<view class="integral-list-main-list">
						<view>发放账号</view>
						<view>{{item.vendorTel ||'XX科技'}}</view>
					</view>
					<view class="integral-list-main-list">
						<view>发放时间</view>
						<view>{{item.exDate}}</view>
					</view>
					<view class="integral-list-main-list">
						<view>发放方式</view>
						<view>{{item.type.split('-')[1]}}</view>
					</view>
					<view class="integral-list-main-list">
						<view>交易编号</view>
						<view>{{item.id}}</view>
					</view>
				</view>
			</template>
		</view>
		<view class="null" v-if="page == pages">没有更多交易记录了</view>
	</view>
</template>

2. js实现部分：

<script>
	export default {
		data() {
			return {
				page: 1,
				pages: 0,
				isPull: false,
				recordlist: [], //交易数据列表
			};
		},
		onLoad() {
			this.getList()
		},
		onPullDownRefresh() {
			this.page = 1;
			this.isPull = true;
			this.getList();
		},
		onReachBottom() {
			if (this.page < this.pages) {
				this.page++;
				this.getList();
			}
		},
		methods: {
			getList() {
				this.$http('Uurl', {
					page: this.page,
					pageSize: 10
				}, "POST").then(data => {
					uni.stopPullDownRefresh();
					this.pages = data.data.pages;
					if (this.isPull) {
						this.isPull = false;
						this.recordlist = [];
					}
					this.recordlist = this.recordlist.concat(data.data.list);
				})
			},
		}
	}
</script>

3.css部分：

<style lang="scss" scoped>
	.integral {
		min-height: 100vh;
		padding-bottom: 20upx;
		background: #F4F4F4;

		&-list {
			padding: 0 20upx;
			background-color: #FFFFFF;
			margin-bottom: 20upx;

			&-header {
				padding: 30upx 0;
				border-bottom: 1upx solid #EBEBEB;
				text-align: center;

				&-account {
					font-size: 26upx;
					color: #181818;
				}

				&-points {
					margin-top: 20upx;
					color: #F95151;
					font-size: 42upx;

					&.green {
						color: #06C05F;
					}
				}
			}

			&-main {
				padding: 20upx 10upx;

				&-list {
					display: flex;
					flex-direction: row;

					view {
						width: 160upx;
						line-height: 50upx;
						font-size: 26upx;
						color: #8B8B8B;

						&:last-child {
							width: calc(100% - 160upx);
							color: #181818;
						}
					}
				}
			}
		}
		.null {
			text-align: center;
			color: #AAAAAA;
			font-size: 24upx;
		}
	}
</style>