![](https://i-blog.csdnimg.cn/blog_migrate/08731fef2f2625fde4c918f6e217008d.png)
首先改造之前的发送请求的代码
![](https://i-blog.csdnimg.cn/blog_migrate/0ec50b1debadeec29fe154775ac246a9.png)
下拉加载:需要把之前的数据和请求回来的数据重新结合成一个新的的数据,然后再把这新的数据赋值给videoLists中,然后重新渲染页面。触发下拉加载后需要给offset这个属性加上10,下次请、求的数据就是新的数据。
![](https://i-blog.csdnimg.cn/blog_migrate/a78558eb4afeb22588d66aa819cacf45.png)
这里请求的回来的参数中有一个hasMore这个属性,如果是false就说明没有更多数据了,然后就弹窗提醒灭有更多数据了,如果有则继续发送请求。
![](https://i-blog.csdnimg.cn/blog_migrate/c4c42fde7140f1ed3f5abb75c296a3f9.png)
上拉刷新:原理:上拉的时候那之前的数据重置和清空
![](https://i-blog.csdnimg.cn/blog_migrate/d69083d151d2b625f21eba96ed5d8671.png)
页面代码
<!--pages/main-video/main-video.wxml-->
<scroll-view style="height: {{windowHeight}}px" scroll-y="true">
<view>
<view class="videoList">
<block wx:for="{{videoLists}}" wx:key="{{item.srtisId}}">
<video-item class="item" itemData="{{item}}" />
</block>
</view>
</view>
</scroll-view>
// pages/main-video/main-video.js
import { getTopMv } from "../../services/request/myvideorequest"
const systemInfo = wx.getSystemInfoSync();
const windowHeight = systemInfo.windowHeight;
Page({
/**
* 页面的初始数据
*/
data: {
videoLists:[],
offset:0,
hasMore:true
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
this.getvideo()
},
async getvideo(){
const videolist = await getTopMv(this.data.offset)
const newVideoList = [...this.data.videoLists,...videolist.data]
this.setData({videoLists: newVideoList})
this.data.offset+=10
this.data.hasMore = videolist.hasMore
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
console.log("下拉刷新")
this.data.offset=0
this.data.hasMore=true
this.setData({videoLists:[]})
this.getvideo().then(
wx.stopPullDownRefresh()
)
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
if(!this.data.hasMore) {
wx.showToast({
title:"没有更多数据了",
})
return
}
this.getvideo(this.data.offset)
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})
/* pages/main-video/main-video.wxss */
.videoList{
display: flex;
flex-wrap: wrap;
justify-content: space-around;
padding:0 10rpx;
}
.item{
width: 48%;
}
{
"usingComponents": {
"video-item":"/components/video-items/video-item"
},
"enablePullDownRefresh": true
}