微信小程序 上拉加载

2024-04-24 00:32
文章标签 加载 程序 微信 上拉

本文主要是介绍微信小程序 上拉加载,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

背景需求

OA系统中,领导要对员工的的申请进行审批,如此多的员工,不可能一下子都显示出来,需要后台进行分页,每次上拉触底加载一页,每次上拉触底加载一页。

注:因为各方面原因,不能上传源代码,只提供思路和伪代码

伪代码(Javascript)

data: {// 是否有待审批数据和已审批数据pending_noData:false,approved_noData: false,// 默认显示第几个菜单导航 pending是待领导审批的,approved是领导已审批的currentTab: 'pending',// 每一页显示多少条数据pageSize: 5,// 领导待审批列表、待审批的总页数和当前页数pendingList: [],pendingPageNumber: 1,pendingTotalPage: 100,// 领导已审批列表、已审批的当前页和总页数approvedList: [],approvedPageNumber: 1,approvedTotalPage: 100,
},
onLoad: function (options) {// 1、从后台获取数据,给两个列表、两个列表总页数赋值、并设置当前页数为1 
},
onReachBottom: function () {// 1、如果选择了pending栏// 1.1 当前页数=当前页数+1// 1.2 如果当前页数小于等于总页数(因为先加1了),向后台发起请求新一页的数据// 1.3 将新数据push到pendingList数组中// 2、如果选择了approved栏// 2.1 当前页数=当前页数+1// 2.2 如果当前页数小于等于总页数(因为先加1了),向后台发起请求新一页的数据// 3.3 将新数据push到approvedList数组中
}

核心代码(Javascript)

init: function () {let that = this;if (that.data.pendingList == undefined || that.data.pendingList.length == 0) {util.showLoading("正在加载");}this.setData({pendingPageNumber: 1,approvedPageNumber: 1,clickSearch: false});// 待我审批的-URLwx.request({url: defaultApprovingURL,data: {nowPage: 1,pageSize: that.data.pageSize,openId: wx.getStorageSync('openId')},method: "GET",success: function (res) {that.setData({pending_noData: res.data.data.list.length === 0,pendingList: res.data.data.list || [],pendingTotalPage: Math.ceil(parseInt(res.data.data.pagesize) / parseInt(that.data.pageSize)),pendingNumber: res.data.data.pagesize});wx.hideLoading();},fail: function (res) {console.log("获取待审批列表--fail");}});// 我已审批的-URLwx.request({url: defaultApprovedURL,data: {nowPage: 1,pageSize: that.data.pageSize,openId: wx.getStorageSync('openId')},method: "GET",success: function (res) {that.setData({approved_noData: res.data.data.list.length === 0,approvedList: res.data.data.list || [],approvedTotalPage: Math.ceil(parseInt(res.data.data.pagesize) / parseInt(that.data.pageSize)),approvedNumber: res.data.data.pagesize,});},fail: function (res) {console.log("获取已审批列表--fail");util.showError(that, '网络错误,请稍后重试');}});
},
onLoad: function () {this.init();
},
onReachBottom: function () {let that = this;let currentTab = that.data.currentTab;if (currentTab == "pending") {let pendingPageNumber= that.data.pendingPageNumber+ 1;if (pendingPageNumber<= that.data.pendingTotalPage) {that.setData({pendingPageNumber: pendingPageNumber});wx.showLoading({title: "加载中"});wx.request({url: defaultApprovingURL,data: {nowPage: that.data.pendingPageNumber,pageSize: that.data.pageSize,openId: wx.getStorageSync('openId')},method: "GET",success: function (res) {wx.hideLoading();that.setData({pendingList: that.data.pendingList.concat(res.data.data.list)});},fail: function (res) {wx.hideLoading();}});}} else if (currentTab == "approved") {let approvedPageNumber = that.data.approvedPageNumber + 1;let approvedTotalPage = that.data.approvedTotalPage;if (approvedPageNumber <= approvedTotalPage) {that.setData({approvedPageNumber: approvedPageNumber});wx.showLoading({title: "加载中"});let data = {};data.nowPage = that.data.approvedPageNumber;data.pageSize = that.data.pageSize;data.openId = wx.getStorageSync('openId');wx.request({url: defaultApprovedURL,data: data,method: "GET",success: function (res) {wx.hideLoading();that.setData({approvedList: that.data.approvedList.concat(res.data.data.list)});},fail: function (res) {wx.hideLoading();}});}} }

这篇关于微信小程序 上拉加载的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


原文地址:
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.chinasem.cn/article/930298

相关文章

java向微信服务号发送消息的完整步骤实例

《java向微信服务号发送消息的完整步骤实例》:本文主要介绍java向微信服务号发送消息的相关资料,包括申请测试号获取appID/appsecret、关注公众号获取openID、配置消息模板及代码... 目录步骤1. 申请测试系统2. 公众号账号信息3. 关注测试号二维码4. 消息模板接口5. Java测试

Spring如何使用注解@DependsOn控制Bean加载顺序

《Spring如何使用注解@DependsOn控制Bean加载顺序》:本文主要介绍Spring如何使用注解@DependsOn控制Bean加载顺序,具有很好的参考价值,希望对大家有所帮助,如有错误... 目录1.javascript 前言2. 代码实现总结1. 前言默认情况下,Spring加载Bean的顺

Python基于微信OCR引擎实现高效图片文字识别

《Python基于微信OCR引擎实现高效图片文字识别》这篇文章主要为大家详细介绍了一款基于微信OCR引擎的图片文字识别桌面应用开发全过程,可以实现从图片拖拽识别到文字提取,感兴趣的小伙伴可以跟随小编一... 目录一、项目概述1.1 开发背景1.2 技术选型1.3 核心优势二、功能详解2.1 核心功能模块2.

springboot加载不到nacos配置中心的配置问题处理

《springboot加载不到nacos配置中心的配置问题处理》:本文主要介绍springboot加载不到nacos配置中心的配置问题处理,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑... 目录springboot加载不到nacos配置中心的配置两种可能Spring Boot 版本Nacos

python编写朋克风格的天气查询程序

《python编写朋克风格的天气查询程序》这篇文章主要为大家详细介绍了一个基于Python的桌面应用程序,使用了tkinter库来创建图形用户界面并通过requests库调用Open-MeteoAPI... 目录工具介绍工具使用说明python脚本内容如何运行脚本工具介绍这个天气查询工具是一个基于 Pyt

Ubuntu设置程序开机自启动的操作步骤

《Ubuntu设置程序开机自启动的操作步骤》在部署程序到边缘端时,我们总希望可以通电即启动我们写好的程序,本篇博客用以记录如何在ubuntu开机执行某条命令或者某个可执行程序,需要的朋友可以参考下... 目录1、概述2、图形界面设置3、设置为Systemd服务1、概述测试环境:Ubuntu22.04 带图

Python程序打包exe,单文件和多文件方式

《Python程序打包exe,单文件和多文件方式》:本文主要介绍Python程序打包exe,单文件和多文件方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录python 脚本打成exe文件安装Pyinstaller准备一个ico图标打包方式一(适用于文件较少的程

Python程序的文件头部声明小结

《Python程序的文件头部声明小结》在Python文件的顶部声明编码通常是必须的,尤其是在处理非ASCII字符时,下面就来介绍一下两种头部文件声明,具有一定的参考价值,感兴趣的可以了解一下... 目录一、# coding=utf-8二、#!/usr/bin/env python三、运行Python程序四、

使用Python获取JS加载的数据的多种实现方法

《使用Python获取JS加载的数据的多种实现方法》在当今的互联网时代,网页数据的动态加载已经成为一种常见的技术手段,许多现代网站通过JavaScript(JS)动态加载内容,这使得传统的静态网页爬取... 目录引言一、动态 网页与js加载数据的原理二、python爬取JS加载数据的方法(一)分析网络请求1

如何基于Python开发一个微信自动化工具

《如何基于Python开发一个微信自动化工具》在当今数字化办公场景中,自动化工具已成为提升工作效率的利器,本文将深入剖析一个基于Python的微信自动化工具开发全过程,有需要的小伙伴可以了解下... 目录概述功能全景1. 核心功能模块2. 特色功能效果展示1. 主界面概览2. 定时任务配置3. 操作日志演示