<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中，列表触底加载是一种常见的用户体验优化技术，用于在用户滚动到列表底部时自动加载更多数据。