一.上拉刷新实现流程

1.发送请求获取列表数据。

1.1什么时候触发加载下一页，怎么触发。

1.1.2当滚动条触底时触发事件，事件名onReachBottom在小程序的页面生命周期中可以查看

1.2，触发后要做那些处理。

 1.2.1首先判断有没有下一页数据：当前的页码 和 总页数。求总页数 = Math.ceil(总条数/页容量)

解释：Math.ceil(是向上取整)，总条数据：发送请求后台会返回总条数，页容量：一页有多少条数据。例：var  pagecount  = Math.ceil( 21 / 10 ),console.log( pagecount,2.1,取整后是3 )。

判断条件：当前的页码 >=总页数 。

1.2.2什么地方写获取总页数：接口请求成功后后端返回一个total属性。

1.2.3有下一页数据，总页数++/pagenum++,发送请求，其次不能对页容量(List)进行替换而是要对旧数组里的旧数据进行拼接

1.2.4没有下一页则  弹窗提示（没有下一页数据了）。

1.2.5讲完上代码

//引入封装好的api
<script>
import { request } from "../../request/index.js";
export default {

 data(){
 
   return {
        // 页面要渲染的商品数组
    goodsList: []
     // 全局 接口参数 
  QueryParams: {
    
    // 分类id 
    cid: "",
    // 页码 
    pagenum: 1,
    // 页容量
    pagesize: 10
  },
  // 总页数
  TotalPages: 1,
    }
   
  },

  onLoad(){

   this.getGoodsList()
},

 // 滚动条触底 上拉加载下一页 事件
onReachBottom(){
 //1.2.1 先判断还有没有下一页数据
  if(this.QueryParams.pagenum ===  this.TotalPages  ){
   
 // 没有下一页数据
      console.log("没有下一页数据");
      uni.showToast({
        title: '没有下一页数据了',
        icon: 'none'
      });

  
}else {
   this.QueryParams.pagenum++ //有下一页进行累加
   this.getGoodsList() //发送请求
 }

}

methods:{

  // 1. 获取商品列表数据
  async getGoodsList() {
    const res = await request({ url: "/goods/search", data: this.QueryParams }); //第一步
    this.TotalPages = Math.ceil(res.total / this.QueryParams.pagesize); //总页数
   
      this.goodsList=[...this.goodsList, ...res.goods]  //数组里的旧数据进行接接

  }, 

}

}

</script>

-------------------------分割线-------------------------

1.下拉刷新

1.1触发下拉刷新的事件，需要在uniapp.json文件中开启运行下拉

2.实现刷新

2.1.1重置 pagenum =1 (pagenum页码)

2.1.2重置data中的数组goodsList = [ ]

2.1.3重新发送请求：pagenum = 1 , 会对goodsLost = [ ] 重新赋值

3.当数据请求回来时需要手动的关闭下拉刷新窗口uni.stopPullDownRefresh() 

4.上代码

//引入封装好的api
<script>
import { request } from "../../request/index.js";
export default {

 data(){
 
   return {
        // 页面要渲染的商品数组
    goodsList: []
     // 全局 接口参数 
  QueryParams: {
    // 关键字  小米 。。 可以为空字符串
    query: "",
    // 分类id 
    cid: "",
    // 页码 
    pagenum: 1,
    // 页容量一页显示多少条
    pagesize: 10
  },
  // 总页数
  TotalPages: 1,
    }
   
  },

  onLoad(){

   this.getGoodsList()
},

 // 滚动条触底 上拉加载下一页 事件
onReachBottom(){
 //1.2.1 先判断还有没有下一页数据
  if(this.QueryParams.pagenum ===  this.TotalPages  ){
   
 // 没有下一页数据
      console.log("没有下一页数据");
      uni.showToast({
        title: '没有下一页数据了',
        icon: 'none'
      });

  
}else {
   this.QueryParams.pagenum++ //有下一页进行累加
   this.getGoodsList() //发送请求
 }

}

methods:{

  // 1. 获取商品列表数据
  async getGoodsList() {
    const res = await request({ url: "/goods/search", data: this.QueryParams }); //第一步
    this.TotalPages = Math.ceil(res.total / this.QueryParams.pagesize); //总页数
   
      this.goodsList=[...this.goodsList, ...res.goods]  //数组里的旧数据进行接接

   uni.stopPullDownRefresh() //关闭下拉刷新窗口

  }, 
 // 页面下拉刷新事件
onPullDownRefresh(){
  // 1 重置 页码
    // 2 重置data中的数组
    // 3 重新发送请求
  this.QueryParams.pagenum = 1 
  this.goodsList = []
   this.getGoodsList()
  
 }

}

}

</script>