【无标题】

视频教程

完成“快速返回顶部”功能/ 当接口数据中已存在当前页和总页数时，如何进行上拉加载等功能

注意代码中this.data的data指的是什么

<template>
	<view>
		<!-- 快速返回顶部 -->
		<uni-list>
			<uni-list-item v-for="(item,index) in data.data" :key="index" :title="item.title" :note="item.price">
				<!-- 改变默认的样式：删除上方的默认项，通过插槽的方法自定义图片，，，其他默认样式也是如此-->
				<image :src="baseURL + item.pic" slot="header"
					style="width: 200rpx; height: 200rpx; min-width: 200rpx;">
				</image>
				<view slot="body" class="body">
					<view class="title">{{item.title}}</view>
					<view class="price">￥{{item.price}}</view>
				</view>
			</uni-list-item>
		</uni-list>
		<uni-load-more :status="status"></uni-load-more>
		<button type="default" size="mini" class="backTop" @click="gobackTop">回到顶部</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				url: 'http://101.96.128.94:9999/data/product/list.php',
				baseURL: 'http://101.96.128.94:9999/',
				data: {},
				status:'more'
			}
		},
		//发送网络请求，获取数据，获取成功后 再将数据显示在页面上
		//先写生命周期
		mounted() {
			this.getData();
		},
		onReachBottom() {
			const{pno, pageCount} = this.data;  //把当前页page和总页数pageCount从数据项中快速地结构出来，然后做一个判断
			if(pno == pageCount) return;  //如果当前页和总页数时相同的话 就不要再发请求数据了，直接提示没有更多数据了
			
			this.status = 'loading';
			uni.request({
				url: this.url,
				method: 'GET',
				data: {pno: this.data.pno+1},
				success: res => {
					console.log(res);
					res.data.data = [...this.data.data, res.data.data]//将新数据与之前一头的新数据进行合并显示
					this.data = res.data //把网络请求的数据整体保存到定义的data中，要想取得其中的数组，用的就是data下的data 
					const{pno, pageCount} = this.data;
					this.status = pno == pageCount ? 'noMore':'More'; //如果相同 则“没有更多数据了” 否则“上拉加载更多数据”
				},
				fail: () => {},
				complete: () => {}
			})
		}
		//函数 方法
		methods: {
			getData() { //获取数据
				uni.request({
					url: this.url,
					method: 'GET',
					data: {},  //接口数据中已经弄好了当前实在哪一页，所以就不必对当前页进行获取了
					success: res => {
						console.log(res);
						this.data = res.data //把网络请求的数据整体保存到定义的data中，要想取得其中的数组，用的就是data下的data 
					},
					fail: () => {},
					complete: () => {}
				})
			}
		},
		gobackTop(){
			uni.pageScrollTo({
				scrollTop:0,  //点击后返回到顶部
				duration:100  //动画时长
			})
		}
	}
</script>

<style>
	.body {
		display: flex;
		flex-direction: column;
		/*纵向排列*/
		justify-content: space-around;
	}

	.title {
		overflow: hidden;
		text-overflow: ellipsis;
		line-height: 2;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		/*考虑兼容性*/
	}

	.price {
		color: red;
		font-size: 1.1em;
	}
	.backTop{
		position: fixed;
		bottom: 30px;
		right: 10px;
	}
</style>