微信小程序实现下拉刷新和上拉触底刷新数据-前端-阿习进阶博客
Java
MySQL
大数据
Python
前端
黑科技
    首页 >> 互联网 >> 前端

微信小程序实现下拉刷新和上拉触底刷新数据

[导读]:一、启用下拉刷新(两种方式)1、全局下拉刷新在app.json的window节点中,将enablePullDownRefresh设置为true2、局部下拉刷新在页面的json文件中,将enablePullDownRefresh设置为true二、配置下拉刷新在全局或页面的.json文件中,通过backgroundColor和backgroundTextStyle来配置下拉刷新窗口的样式,其中:backgroundColor...

一、启用下拉刷新(两种方式)

1、全局下拉刷新

在app.json的window节点中,将enablePullDownRefresh设置为true

2、局部下拉刷新

在页面的json文件中,将enablePullDownRefresh设置为true

二、配置下拉刷新

在全局或页面的.json文件中,通过backgroundColor和backgroundTextStyle来配置下拉刷新窗口的样式,其中:

backgroundColor:用来配置下拉刷新窗口的背景颜色,仅支持16进制的颜色值

backgroundTextStyle:用来配置下拉刷新loading的样式,仅支持dark和light两个颜色属性

如图在页面的json文件进行的配置:

三、下拉刷新

1、在data中定义存放列表的属性,用来接收获取的数据

data: {
    list:[], // 列表数组
    pageNum: 1,// 页码值
    pageSize: 10, // 每页显示多少条数据
    // 总数量,用来实现分页
    total: 0
  },

2、将页面跳转时携带的参数,转存到分页中:

  /**
  * 生命周期函数--监听页面加载
  */
 onLoad: function (options) {
  // 调用获取商品列表数据的方法
 this.getList()
 },

3、 定义获取商品列表数据

//获取商品列表数据方法
getList(isPull) {
    wx.showLoading({
      title: '数据加载中...',
    })
    wx.request({
      url: `******`,
      method:'GET',
      success:({data:res})=>{
        console.log(res);
        // 只要数据请求完毕,就立即按需调用 isPull回调函数
         
      // 无论获取数据是否成功都会执行该方法
      complete:()=>{
        wx.hideLoading() // 关闭loading
      }
    })
  },

3、在页面循环数据,展示到页面(此处代码省略)

4、下拉刷新事件

      /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    // 1. 重置关键数据
    
      this.pagenum:1,
      total :0,
      isloading : false,
      List : []
    })
    // 2. 重新发起请求 并关闭下拉窗口
    this.getList(() => wx.stopPullDownRefresh())
  },

四、上拉触底事件

1、首先需要配置json文件,“onReachBottomDistance”: 150

2、在onReachBottom上拉触底事件中处理

    /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
  if(this.data.isLoading) return  //判断是否为true 
  this.pageNum:pageNum += 1// 让页码值自增 +1
  this.getList()// 重新获取列表数据
  },

3、通过节流阀防止发起额外的请求

3.1在 data 中添加 isloading 节流阀如下:

  data: {
    // 是否正在请求数据
    isloading: false
  }

3.2修改 getGoodsList 方法,在请求数据前后,分别打开和关闭节流阀:

// ** 打开节流阀
getList() {
  this.setData({
      isLoading:true
    })
   // 省略中间代码,和前面一致
  wx.request({
   //...省略代码,和前面 3、定义获取商品列表数据 代码不变
  // 无论获取数据是否成功都会执行该方法
      complete:()=>{
        wx.hideLoading() // 关闭loading
        this.isLoading:false
      }
  })
}

3.3 判断数据是否加载完毕,避免不必要的请求

如果下面的公式成立,则证明没有下一页数据了:

当前的页码值 * 每页显示多少条数据 >= 总数条数

pagenum * pagesize >= total
onReachBottom: function () {
// 判断是否还有下一页数据
  if (this.queryObj.pagenum * this.queryObj.pagesize >= this.total) {
  wx.showLoading({
      title: '数据加载完毕!',
    })
    wx.hideLoading() // 关闭loading
    return 
   }
  }

上拉触底完整代码如下

data: {
    List:[], // 商品列表数组
    query: '',   // 查询关键词
    cid: '',   // 商品分类Id
    pagenum: 1,// 页码值
    pagesize: 10 // 每页显示多少条数据
    // 总数量,用来实现分页
    total: 0,
    // 是否正在请求数据
    isloading: false
},
//获取商品列表数据方法
getGoodsList() {
    this.setData({
      isLoading:true
    })
    wx.showLoading({
      title: '数据加载中...',
    })
    wx.request({
      url: `******`,
      method:'GET',
      success:({data:res})=>{
        console.log(res);
        this.setData({
          List:[...this.data.goodsList, ...res.data],
          total:res.tolal
        })
      },
      // 无论获取数据是否成功都会执行该方法
      complete:()=>{
        wx.hideLoading() // 关闭loading
        this.setData({
          isLoading:false
        })
      }
    })
  },
   /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
  // 判断是否还有下一页数据
  if (this.pagenum * this.pagesize >= this.total) {
  wx.showLoading({
      title: '数据加载完毕!',
    })
    wx.hideLoading() // 关闭loading
    return 
   }
  // 判断是否正在请求其它数据,如果是,则不发起额外的请求
  if(this.data.isLoading) return 
  let pagenum = 'this.pagenum'
    this.pageNum += 1// 让页码值自增 +1
    this.getList()// 重新获取列表数据
  },

image.png

本文来自阿习进阶博客,如若转载,请注明出处:https://www.yanxias.com

留言区

联系人:
手   机:
内   容:
验证码:

历史留言

联系人:阿习

手机号:156****7890

留言内容:欢迎大家一起讨论文章,有喜欢发帖的可以私聊我给你开权限,发文章

留言时间:2022-05-09 17:46:15

回复内容:互联网阿习

回复时间:2022-05-09 17:46:15

用户IP:220.***.***.232

用户操作系统:Windows 10

欢迎加Easy的QQ