uniapp小程序增加加载功能

<template>
	<scroll-view scroll-y="true" @scrolltolower="onReachBottom" @scroll="onPageScroll">
	<view class="content" style="background-image: url(/static/bg.jpg);height:auto!important;">
		<!-- title -->
		<view class="title">
			拍摄花絮
		</view>
		<view class="wrap">
			<!-- photo -->
			<view class="photo">
				<view class="items">
					
					<checkbox-group @change="checkboxChange" class=" flex">
						<view class="item" v-for="(item,index) in photoLists" :key="index"
							:class="{ 'active': item.checked }">
							<image :src="item.image" mode="aspectFill" @click="previewImage(item.image)"></image>
						</view>
					</checkbox-group>
				
				</view>
				<uni-load-more :status="status"></uni-load-more>
			</view>
			
		</view>
	</view>
		</scroll-view>
</template>

<script>
	import request from '@/common/request.js';
	export default {
		data() {
			return {
				activeTab: 0,
				photoLists: [], //图片列表
				list: [],
				status: 'more',
				page: 1,
				pageSize: 6,
				total: 0,
				scrollTop: 0,


			}
		},
		created() {
			this.getData();
			
		},
		

		onPullDownRefresh() {
			// console.log(22) 
			this.photoLists = [];
			this.page = 1;
			this.getData();
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1000);
		},
	
		methods: {
			onReachBottom() {
				if (this.page * this.pageSize < this.total) {
					this.status = 'loading';
					this.page++;
					this.getData();
				} else {
					this.status = 'noMore';
				}
			},
			// 图片显示
			getData() {
				let opts = {
					url: 'api/Cream/plist',
					method: 'get'
				};
				let params = {
					page: this.page,
					pageSize: this.pageSize
				};
				uni.showLoading({
					title: '加载中'
				})
				request.httpRequest(opts,params).then(res => {
					uni.hideLoading();
					if (res.code == 200) {
						this.photoLists.push(...res.data);
						this.total=res.count;
					}
				});
			},
			// 预览图片
			previewImage(e) {
				let img = [];
				img[0] = e;
				uni.previewImage({
					current: 0,
					urls: img,
				});
			},
		}
	}
</script>

<style>
	.title {
		color: #333;
	}

	.photo {
		margin: 80rpx auto 30rpx;
	}
</style>

在uniapp 中，列表 触底加载 是一种常见的用户体验优化技术，用于在用户滚动到列表 底部时自动加载更多数据。