微信小程序列表下拉刷新上拉加载

最新推荐文章于 2024-09-09 14:20:55 发布

段宸.

最新推荐文章于 2024-09-09 14:20:55 发布

阅读量651

点赞数

分类专栏：微信小程序文章标签： javascript 小程序

本文链接：https://blog.csdn.net/weixin_47175781/article/details/108849477

版权

微信小程序专栏收录该内容

6 篇文章 2 订阅

订阅专栏

本文详细介绍了如何在微信小程序中实现列表的下拉刷新和上拉加载功能，包括封装网络请求、设置onReachBottomDistance和相关事件处理。通过实例演示了如何在js中管理和调用这些功能，提升用户体验。

摘要由CSDN通过智能技术生成

微信小程序列表下拉刷新上拉加载

在微信小程序当中我们经常会遇到一些列表，而我们会经常在其他app或者其他小程序当中遇到当前列表可以一直往下滑动，而在顶部下拉时又会重新加载新的内容，而我们要做出这种效果的话就需要在小程序的方法中加入网络请求

我们需要在js中将网络请求方法封装为一个独立函数

//列表显示
  lb:function(){
    wx.request({
    //网络请求
      url:'http://116.62.201.243:8080/wxxcx/goods/getGoodsByPage',
      method:"POST",
      data:{
        page:page,
        pageSize:10
      },
      //回调成功函数
      success:(res)=>{
        console.log(res)
        var list=res.data.data
        console.log("list",list)
        var lists=this.data.data
        console.log("lists",lists)
        //判断返回字段是否存在
        if(list === undefined){
          //无返回值提示弹窗
          wx.showToast({
            title: '数据加载完成',
          })
        }else{
        //有返回值将返回值推入原有数组中
        if(page===1){
          lists=list
          console.log("lists",lists)
        }else{
          for(var i=0;i<list.length;i++){
            data.push(lists[i])
          }
        }
      }
        //将数据放入data中
        this.setData({
          data:list
        })
      }
    })
  },

这样的话可以在其他方法中随意调用此方法，省去多行代码

上拉加载

而上拉加载数据需要在页面json中设置onReachBottomDistance属性（距页面底部多少像素触发页面上拉触底事件的处理函数）

在这里插入图片描述
而在上拉触底事件内直接调用此函数就可以了

在这里插入图片描述

onReachBottom: function () {
    //用户每次下拉页面值加一
    page++
    //设置定时器
    var d = setTimeout(() => {
      wx.showToast({
        title: '加载数据中',
        icon: 'loading',
        mask: true,
        //成功返回函数
        success: (res) => {
          //关闭定时器
          clearInterval(d)
          //调用封装的网络请求函数
          this.lb()
        }
      })
    }, 1000)
 }

下拉刷新事件

在js页面中的onPullDownRefresh方法（监听用户下拉动作）内调用封装的函数重新加载第一个页面的数据

 /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
     //loading弹窗
      wx.showLoading({
        title:"√"
      })
      //设置定时器两秒后关闭弹窗
      setTimeout(function(){
        wx.hideLoading()
      },2000)
      //调用封装的网络请求方法
      this.lb()
  },