小程序进阶学习（视频首页-上拉刷新，下拉加载）

 首先改造之前的发送请求的代码

下拉加载：需要把之前的数据和请求回来的数据重新结合成一个新的的数据，然后再把这新的数据赋值给videoLists中，然后重新渲染页面。触发下拉加载后需要给offset这个属性加上10，下次请、求的数据就是新的数据。

这里请求的回来的参数中有一个hasMore这个属性，如果是false就说明没有更多数据了，然后就弹窗提醒灭有更多数据了，如果有则继续发送请求。

上拉刷新：原理：上拉的时候那之前的数据重置和清空

页面代码

<!--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
}