微信小程序开发学习笔记——4.10【小案例】触底加载更多数据onReachBottom

>>跟着b站up主"咸虾米_"学习微信小程序开发中,把学习记录存到这方便后续查找。

课程连接:4.10.【小案例】触底加载更多数据onReachBottom_哔哩哔哩_bilibili

一、wx.js中相应部分修改如下代码

javascript 复制代码
Page({

  /**
   * 页面的初始数据
   */
  data: {
    listArr:[]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    wx.showLoading({
      title: '加载中',
      mask:true
    })
    this.setData({
      listArr:[]
    })
    this.getData();
  },
  //获取随即猫咪网络请求
  getData(){
    wx.request({
      url: 'https://api.thecatapi.com/v1/images/search?limit=2',
      success:res=>{
        console.log(res.data);
        let oldData=this.data.listArr;
        let newData=oldData.concat(res.data) //用concat拼接数据
        this.setData({
          listArr:newData
        })
        wx.stopPullDownRefresh()  //正常请求完数据之后,就停止显示下拉刷新。
        //wx.hideLoading()  //正常请求完数据之后,就停止显示加载中
      },
      complete:err=>{  //无论请求成功还是失败,都停止显示加载中
        wx.hideLoading() 
        wx.hideNavigationBarLoading()
      }
    })
  },


  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
    this.setData({ //先清空,再获取新的数据
      listArr:[]
    })
    this.getData();
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
    wx.showNavigationBarLoading();
    this.getData();
  },


})

onReachBottom(),触底后执行的函数,导航栏会显示loading,调用getData来加载新数据,而getData()中,用oldData保存旧数组内容,newData保存旧数据加上新读取的10条数据,然后把newData赋值给listArr数组。如此一来,触底后会继续往下加载新的数据,而已加载的数据保持不变。

此时如果下拉刷新,页面只会显示10条,因为在onPullDownRefresh(){}中,一开始就先将数组清空再读取数据了,所以只有10条。

二、其他文件内容和前两篇一样

三、结果

触底几次后,有40组数据

刚下拉刷新时,数组清空

读取数据后,有10组数据

相关推荐
WhyNot?32 分钟前
深度学习入门(三):神经网络的学习
深度学习·神经网络·学习
Moonnnn.41 分钟前
运算放大器(五)电压比较器
笔记·学习·硬件工程
KangkangLoveNLP2 小时前
手动实现一个迷你Llama:使用SentencePiece实现自己的tokenizer
人工智能·深度学习·学习·算法·transformer·llama
kfepiza2 小时前
`accept_ra` 和 `autoconf` 和 `forwarding` 的关系 笔记250404
linux·网络·笔记·tcp/ip·智能路由器·ip·tcp
浪淘沙jkp2 小时前
大模型学习二:DeepSeek R1+蒸馏模型组本地部署与调用
学习·deepseek
kfepiza3 小时前
Debian编译安装mysql8.0.41源码包 笔记250401
数据库·笔记·mysql·debian·database
m0_613607013 小时前
数据集(Dataset)和数据加载器(DataLoader)-pytroch学习3
学习
序属秋秋秋3 小时前
算法基础_基础算法【位运算 + 离散化 + 区间合并】
c语言·c++·学习·算法·蓝桥杯
虾球xz4 小时前
游戏引擎学习第198天
学习·游戏引擎
网络安全指导员5 小时前
如何在JMeter中配置断言,将非200状态码视为测试成功
网络·学习·jmeter·安全·web安全·架构