uniapp开发小程序 结合u-list实现加载分页
包含折叠面板

<template>
	<view class="flex-col page">
		<view class="u-page__item">
			<u-list @scrolltolower="getmore">
				<u-list-item v-for="(item, index) in list" :key="index">
					<div class="borber-bottom">
						<u-collapse accordion :border="false">
							<u-collapse-item :title="item.title">
								<text class="u-collapse-content">{{item.content}}</text>
							</u-collapse-item>
						</u-collapse>
					</div>
				</u-list-item>
			</u-list>
		</view>
	</view>
</template>

<script>
	import {
		get_lists
	} from '@/config/api.js'
	export default {
		data() {
			return {
				list: [],
				data: {
					size: 10,
					page: 1,
					cat_id: 3
				},
				status:'loading'
			};
		},
		onShow() {
			this.getdata()
		},
		methods: {
			getdata() {
				var that = this;
				that.data.page = 1
				that.status = 'loading'
				get_lists({
					params: this.data,
					custom: {
						auth: true
					}
				}).then(res => {
					this.status = 'loadmore'
					if (res.code == 1) {
						that.list = res.data.data
					}
				}).catch(err => {

				})
			},
			getmore() {
				var that = this;
				that.data.page = that.data.page + 1
				this.status = 'loading'
				get_lists({
					params: this.data,
					custom: {
						auth: true
					}
				}).then(res => {
					var data = res.data.data;
					if (!data || data.length == 0) {
						that.status = 'nomore';
					} else {
						this.status = 'loadmore'
					}
					for (var i = 0; i < data.length; i++) {
						that.list.push(data[i]);
					}
				}).catch(err => {

				})
			},
		}
	};
</script>

<style scoped lang="scss">
	.page {
		background-color: rgb(255, 255, 255);
		width: 100%;
		height: 100%;
		overflow-y: auto;

		.group_5 {
			padding: 0 22rpx 840rpx 23rpx;
			flex: 1 1 auto;
			overflow-y: auto;

			.group_6 {
				padding: 33rpx 15rpx 31rpx;
				color: rgb(46, 46, 46);
				font-size: 26rpx;
				line-height: 25rpx;
				white-space: nowrap;
				border-bottom: solid 2rpx rgb(242, 242, 242);

				.image_6 {
					margin-right: 10rpx;
					width: 14rpx;
					height: 24rpx;
				}
			}

			.group_7 {
				margin-top: 31rpx;
				padding: 0 16rpx;
				color: rgb(46, 46, 46);
				font-size: 26rpx;
				line-height: 25rpx;
				white-space: nowrap;

				.image_7 {
					margin: 5rpx 4rpx 5rpx 0;
					width: 24rpx;
					height: 14rpx;
				}
			}

			.text_8 {
				margin-left: 15rpx;
				margin-top: 32rpx;
				color: rgb(185, 185, 185);
				font-size: 24rpx;
				line-height: 25rpx;
				white-space: nowrap;
			}

			.divider {
				margin-top: 32rpx;
				background-color: rgb(242, 242, 242);
				height: 2rpx;
			}
		}

	}

	.borber-bottom {
		border-bottom: 1rpx solid #F2F2F2;
	}

	.u-collapse-content {
		color: #999;
		font-size: 24rpx;
	}
</style>