小程序上拉加载内容onReachBottom

本文详细介绍了一种在小程序中实现上拉加载更多功能的方法,通过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

### 实现 UniApp 小程序页面触底上拉加载数据的功能 在 UniApp 小程序中,`onReachBottom` 是一个用于监听页面触底事件的生命周期函数。通过该函数可以实现触底上拉加载更多数据的功能[^1]。以下是实现这一功能的关键点和完整代码示例: #### 1. 数据加载逻辑 在 `onReachBottom` 方法中,需要定义一个标志位(如 `loading`),以防止重复加载数据。同时,还需要设置分页参数(如 `page` 和 `pageSize`),以便从服务器端获取下一页的数据[^2]。 #### 2. 页面触底事件监听 当用户滚动到页面底部时,`onReachBottom` 方法会被触发。此时可以通过调用接口请求下一页的数据,并将其追加到当前数据列表中[^3]。 #### 3. 完整代码示例 以下是一个完整的代码示例,展示如何在 UniApp 中实现触底上拉加载更多数据的功能: ```javascript // 定义页面数据模型 export default { data() { return { dataList: [], // 数据列表 page: 1, // 当前页码 pageSize: 10, // 每页数据量 loading: false, // 加载状态 hasMore: true // 是否还有更多数据 }; }, methods: { // 获取数据的方法 fetchData() { if (this.loading || !this.hasMore) return; this.loading = true; // 开始加载 uni.request({ url: 'https://example.com/api/data', // 替换为实际接口地址 method: 'GET', data: { page: this.page, pageSize: this.pageSize }, success: (res) => { const newData = res.data.list || []; if (newData.length < this.pageSize) { this.hasMore = false; // 如果返回数据少于每页大小,则没有更多数据 } this.dataList = this.dataList.concat(newData); // 将新数据追加到列表中 this.page++; // 增加页码 }, complete: () => { this.loading = false; // 加载完成 } }); } }, onReachBottom() { // 触底事件触发时调用数据加载方法 this.fetchData(); }, onLoad() { // 页面加载时首次请求数据 this.fetchData(); } }; ``` #### 4. 注意事项 - 在 `fetchData` 方法中,需要判断是否正在加载数据或是否还有更多数据可加载,避免重复请求或无效请求[^4]。 - 使用 `uni.request` 请求数据时,请确保替换为实际的接口地址,并根据接口返回格式调整数据处理逻辑[^5]。 - 在页面中显示加载状态时,可以通过 `loading` 标志位控制加载动画或提示信息[^6]。 ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值