小程序上拉加载内容onReachBottom

最新推荐文章于 2025-07-17 21:30:00 发布

转载最新推荐文章于 2025-07-17 21:30:00 发布 · 8.4k 阅读

小程序专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了一种在小程序中实现上拉加载更多功能的方法，通过onReachBottom事件触发加载，利用wx.request请求数据并更新页面，展示了具体的代码实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天做小程序，需要做上拉加载更多内容的功能，如下图

用到了onReachBottom方法，具体实现代码如下

Page({
//初始化数据
data: {
    list_all: [],
},

onReachBottom:function(){
    //上拉加载
    wx.showLoading({
      title: '正在加载',
    })

    var that = this
    //加载次数加一
    this.setData({
      page:this.data.page+1
    })  
    
    //从接口获取数据
    wx.request({
      url: 'https://test.wensite.com/getMore',
      data: {       
         page: that.data.page,
      },
      method: 'GET',
      header: {
        'content-type': 'application/json;application/x-www-form-urlencoded;charset=utf-8' // 默认值
      },
      success: function (res) {
      
        if (res.data.list_all != undefined) {
         
          //组合获取的数据
          for (var i = 0; i < res.data.list_all.length; i++) {
           
            that.data.list_all.push(res.data.list_all[i])
          } 
          
           //往前台传递数据
          that.setData({          
            list_all: that.data.list_all
          })
         
        } else if (res.data.list_all == undefined) {
          wx.showLoading({
            title: '加载完毕',
          })
        }


      }
    })
    setTimeout(function () {
      wx.hideLoading()
    }, 1000)
  }
  })

下拉加载数据如下

前台页面如下

<view class='item_wrap'>
<block wx:for="{{list_all}}" wx:key="{{list_all}}">
<view  class='item_lis'  bindtap='opendetails'  data-wzid="{{item.wzid}}" >
<image class='item_lis_img' src='{{item.url}}'></image> 
<view class='info_wrap'>
<view class='item_lis_bt'>{{item.bt}}</view>
<view class='info_lis'>格式：{{item.format}}</view>
<view class='info_lis'>大小：{{item.size}}</view>
<view class='info_lis'>下载：{{item.downl}}</view>
<view class='info_lis'>{{item.time}}</view>
</view>
</view>
</block>
</view>

更多内容请查看原文地址：https://www.codelovers.cn/article/20180823135641.html