ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

微信小程序实战:上拉加载和下拉刷新

2021-03-29 18:57:08  阅读:499  来源: 互联网

标签:pageNum 微信 刷新 上拉 res data 加载


简介:小程序上拉加载和下拉刷新应该是项目中经常用到的功能。下面的onPullDownRefresh和onReachBottom方法实现小程序下拉加载和上拉刷新

首先了解下两个官方API 上拉加载onReachBottom 和 下拉刷新onPullDownRefresh

一、在你的当前json文件里设置window属性

  "enablePullDownRefresh": true,

二、代码示范 (注释的很清楚)

上拉加载 onReachBottom

   //页面上拉加载
onReachBottom() {
	//判断是否开启上拉加载 data中的pageNum和pageSize total是接口返回的
   if (this.data.pageNum * this.data.pageSize >= this.data.total) {
     return;
   }
   this.setData({
     pageNum: this.data.pageNum += 1
   })
     const list = this.data.List;
     this.getNewlist().then(res => {
       this.setData({
       //利用es6 concat拼接
         List: list.concat(res.data)
       })
     })
   }
 },

下拉刷新 onPullDownRefresh

onPullDownRefresh() {
    wx.showNavigationBarLoading();  //动画
    wx.showLoading({
      title: '正在刷新',
    })
    this.setData({
      pageNum: 1
    })
    //列表请求
    this.getNewlist().then(res => {
      if (res) {
        this.setData({
          List: res.data
        })
        wx.hideNavigationBarLoading(); 
        wx.stopPullDownRefresh(); //赋值后停止当前页面下拉刷新
      }
    })
  }

怎么样? 是不是很简单,在我看来核心在于你的计算和数组的拼接

标签:pageNum,微信,刷新,上拉,res,data,加载
来源: https://blog.csdn.net/weixin_45706073/article/details/115307645

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有