小程序下拉刷新,加载更多数据,移动端分页

文章目录

    • 页面结构图
    • WXML页面代码
    • js代码
    • wxss代码
    • 总结
    • 备注

参考:https://juejin.cn/post/7222855604406796346

页面结构图

一般页面就4个结构:最外滚动层、数据展示层、暂无数据层、没有更多数据层。
如图:
在这里插入图片描述

WXML页面代码

<scroll-view style="height:{{containerHeight}}rpx" scroll-y lower-threshold="100rpx" bindscrolltolower="onReachBottom"><block wx:for='{{records}}' wx:key='this'><view class='list-item' data-index='{{index}}'><!-- 内容 --><view>{{item.name}}</view></view></block><block wx:if="{{isLoadEnd&&records.length==0}}"><view class="center-both" style="height:100%"><view class="col-center"><view class="empty-hint">未搜索到单位~</view></view></view></block><view wx:if="{{isLoadComplete&&records.length!=0}}" class="nomore">没有更多数据了</view>
</scroll-view>

js代码

var app = getApp()Page({/*** 页面的初始数据*/data: {//容器高度 = 屏幕高度 - 顶部高度 - 底部高度 - 28padding - 搜索栏// containerHeight: app.globalData.screenHeight - app.globalData.topHeight - app.globalData.bottomHeight - 28 - 96,containerHeight:1300,pageSize: 20, //请求一页的数据数目currentPage: 1, //当前页数currentparameter: '', //要搜索的数据isLoadEnd: false, //是否单次加载结束isLoadComplete: false, //是否获取到全部数据value: "",records: [], //数据},/*** 生命周期函数--监听页面加载*/onLoad(options) {this.startPage('')},getData(searchKey) {wx.showNavigationBarLoading() // 在标题栏中显示加载// 制作假数据this.fakeRequest()},fakeRequest() {let that = thissetTimeout(() => {let ressult = []--app.globalData.retryCountfor (let i = 1; i <= 20; ++i) {if (i > 10 && app.globalData.retryCount < 0) {break}ressult.push({name: '小明' + i})}//将新数据加进去,通知本次加载结束let records = that.data.recordsif (that.data.currentPage == 1) {records = ressult} else {ressult.forEach(element => {records.push(element)});}that.setData({records: records,isLoadEnd: true,isLoadComplete: ressult.length < that.data.pageSize})// 数据成功后,停止下拉刷新wx.hideLoading()wx.stopPullDownRefresh();wx.hideNavigationBarLoading()}, 1500);},//搜索数据startPage(searchKey) {this.setData({ // 重置数据records: [],currentPage: 1,currentparameter: searchKey,isLoadEnd: false,isLoadComplete: false,})app.globalData.retryCount = 2 //测试假数据this.getData(searchKey)},//下一页nextPage() {this.setData({currentPage: ++this.data.currentPage,isLoadEnd: false,})wx.showLoading({title: '正在加载..'})this.getData(this.data.currentparameter)},//滚动到底部加载onReachBottom() {//上拉加载中,或者数据加载结束,不应该触发下一页if (this.data.isLoadEnd && !this.data.isLoadComplete) {this.nextPage()}},onSearch(e) {//关键词搜索this.startPage(e.detail)},
})

wxss代码

.search {height: 96rpx;
}.empty-hint {font-size: 28rpx;font-family: PingFangSC-Regular, PingFang SC;font-weight: 400;color: #949494;line-height: 40rpx;margin-top: 48rpx;
}.nomore {width: 100%;box-sizing: border-box;text-align: center;margin: 28rpx 0 0;font-size: 26rpx;font-family: PingFangSC-Regular, PingFang SC;font-weight: 400;color: #616161;line-height: 36rpx;
}.list-item {background: #FFFFFF;border-radius: 12rpx;margin:  28rpx 32rpx 0;padding: 24rpx 32rpx;box-sizing: border-box;
}

总结

以上代码只是简单的demo,重点要搞清的是:

  1. 页面结构
  2. 获取数据的时候标签isLoadEndisLoadComplete以及数据数量和pagesize的比较

备注

js代码中有wx.stopPullDownRefresh(); ,这里大概讲一下。

这个API表示的是停止当前页面下拉刷新,因为其他代码懒粘了这里就只讲一下用法。

具体使用:

  1. app.js 中window 中添加:"enablePullDownRefresh": true,
  2. 指定页面的js文件中使用onPullDownRefresh(){} 即可;
  3. 需要马上停止,使用wx.stopPullDownRefresh()

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

前端:Vue中使用JS-Cookie

在我们构建Vue站点时候&#xff0c;可能需要使用 cookie 来记录用户信息或者偏好设置&#xff0c;我们可以引入第三方库 GitHub - js-cookie/js-cookie: A simple, lightweight JavaScript API for handling browser cookies 来方便地操作 cookie。接下来我们就来一步一步地实…

Golang | Leetcode Golang题解之第191题位1的个数

题目&#xff1a; 题解&#xff1a; func hammingWeight(num uint32) (ones int) {for ; num > 0; num & num - 1 {ones}return }

# Kafka_深入探秘者(5):kafka 分区

Kafka_深入探秘者&#xff08;5&#xff09;&#xff1a;kafka 分区 一、kafka 副本机制 1、Kafka 可以将主题划分为多个分区(Partition)&#xff0c;会根据分区规则选择把消息存储到哪个分区中&#xff0c;只要如果分区规则设置的合理&#xff0c;那么所有的消息将会被均匀的…

CesiumJS【Basic】- #014 Entity和Primitive的flyTo

文章目录 Entity和Primitive的flyTo1 目标2 实现2.1 实体对象定位2.2 图元对象定位Entity和Primitive的flyTo 1 目标 实体对象和图元对象定位 2 实现 2.1 实体对象定位 实体对象定位可以使用Cesium.Viewer的flyTo方法。由于target参数可以是一个Entity,所以直接调用即可。…

Golang | Leetcode Golang题解之第198题打家劫舍

题目&#xff1a; 题解&#xff1a; func rob(nums []int) int {if len(nums) 0 {return 0}if len(nums) 1 {return nums[0]}first : nums[0]second : max(nums[0], nums[1])for i : 2; i < len(nums); i {first, second second, max(first nums[i], second)}return se…

【Android面试八股文】WebView如何做资源缓存的?

文章目录 引言1. Android WebView的性能问题1.1 H5页面加载速度慢1.1.1 渲染速度慢1.1.2 页面资源加载缓慢1.1.3 总结1.2 耗费流量1.3 总结2. 上述问题的解决方案2.1 前端H5的缓存机制2.1.1 定义2.1.2 作用2.1.3 具体应用2.2 缓存机制2.2.1 浏览器缓存机制 (HTTP Cache)原理特点…

whisper 实现语音转文字

准备需要转码的音频 https://support.huaweicloud.com/sdkreference-sis/sis_05_0039.html 编码转吗的代码 import whisperif __name__ "__main__":file_path "16k16bit.wav"model whisper.load_model("small")result model.transcribe(f…

掌握Vim的艺术:精通diff模式的比较与合并

标题&#xff1a;掌握Vim的艺术&#xff1a;精通diff模式的比较与合并 引言 在软件开发和文本编辑中&#xff0c;比较文件差异是一项常见任务。Vim&#xff0c;作为一款功能强大的文本编辑器&#xff0c;提供了一个内置的diff模式&#xff0c;使得文件比较变得直观和高效。本…

openEuler离线安装nginx

目录 1.创建储存目录 2.切换到储存目录 3.首先在外网的环境下下载nginx的rpm包 4.目录打包tar包拷贝到离线路径 5.安装nginx 6.启动 nginx 7.停止 nginx 8.重新加载 nginx 配置 9.重新启动 nginx&#xff08;先停止再启动 nginx&#xff09; 10.检查 nginx 服务…

【分布式系统】Zookeeper学习笔记

基本概念 Zookeeper工作机制 从设计模式角度理解: 是一个基于观察者模式设计的分布式服务管理框架; 负责存储和管理大家都关心的数据, 一旦这些数据的状态发生变化, Zookeeper就将负责通知已经在Zookeeper上注册的那些观察值做出相应的反应. Zookeeper特点 Zookeeper有: 一…

强化Linux系统安全:利用Tripwire防御文件完整性攻击

摘要 在日益复杂的网络安全环境中&#xff0c;保护Linux系统的文件完整性是维护系统安全的关键。Tripwire作为一种高效的文件完整性监控工具&#xff0c;能够帮助系统管理员检测和响应未授权的文件更改。本文将从网络安全专家的角度&#xff0c;指导如何部署和使用Tripwire&am…

QT中线程同步的互斥量QMutex与QRecursiveMutex

在 Qt 中&#xff0c;有两种常用的互斥量类&#xff1a;QMutex 和 QRecursiveMutex。这两种互斥量类都用于在多线程环境中控制对共享资源的访问&#xff0c;确保线程安全性。下面是关于这两种互斥量类的详细说明&#xff1a; 1. QMutex&#xff1a; 功能&#xff1a;QMutex 是…

EdgeOne 边缘函数 + Hono.js + Fauna 搭建个人博客

一、背景 虽然 “博客” 已经是很多很多年前流行的东西了&#xff0c;但是时至今日&#xff0c;仍然有一部分人在维护自己的博客站点&#xff0c;输出不少高质量的文章。 我使用过几种博客托管平台或静态博客生成框架&#xff0c;前段时间使用Hono.jsFauna &#xff0c;基于 …

STM32教程 使用硬件SPI和模拟SPI驱动W25Q64芯片

STM32教程&#xff1a;使用硬件SPI和模拟SPI驱动W25Q64芯片 摘要 本教程详细介绍了如何在STM32微控制器上使用硬件SPI和模拟SPI来驱动W25Q64 Flash存储器。W25Q64是一款8Mbit的串行Flash存储器&#xff0c;适用于存储程序数据和用户数据。本教程将从SPI基本原理讲起&#xff…

第 10 课:PPML入门/基于SPU机器学习建模实践

本讲主要内容是PPML入门&#xff0c;即基于SPU进行隐私保护的机器学习的建模实践。通过本次学习&#xff0c;可以了解隐私保护机器学习以及隐语SPU的架构&#xff0c;通过实战可以了解如何基于隐语进行隐私保护的NN模型建模。 一、隐私保护机器学习背景 机器学习中的数据隐私问…

RK3568平台开发系列讲解(I2C篇)利用逻辑分析仪进行I2C总线的全面分析

🚀返回专栏总目录 文章目录 1. 基础协议1.1. 协议简介1.2. 物理信号1.3. 总线连接沉淀、分享、成长,让自己和他人都能有所收获!😄 1. 基础协议 1.1. 协议简介 IIC-BUS(Inter-IntegratedCircuit Bus)最早是由PHilip半导体(现在被NXP收购)于1982年开发。 主要是用来方…

将深度相机的实时三维坐标数据保存为excel文档(Python+Pyrealsense2+YOLOv8)

一、如何将数据保存为excel文档 1.excel文件库与相关使用 &#xff08;1&#xff09;导入相应的excel文件库&#xff0c;导入前先要进行pip安装&#xff0c;pip install xlwt import xlwt # 导入用于创建和写入Excel文件的库 (2) 建立一个excel文档&#xff0c;并在第0行写…

RabbitMQ中Direct交换机的用法

前言&#xff1a;比如我们的支付完成之后需要进行修改支付状态还要完成短信通知用户需要同时并发两条指令我们可以使用direct交换机进行指定两个不同的业务去完成这两件事 比如我们现在有direct.queue1/direct.queue2两个消息队列&#xff0c;一个direct交换机 我们创建完成两…

鸿蒙开发之--生命周期

开发官网 开发-HarmonyOS开发者-华为开发者联盟 UIAbility生命周期 1、首先执行onCreate(),用于页面初始化和设置页面逻辑 2、执行onWindowStageCreate()创建一个窗口&#xff0c;在这里可以使windowStage.loadContent(url&#xff0c;&#xff08;&#xff09;>{})打开一…

“拿来主义”学习无限滚动动画(附源码)

欢迎关注&#xff1a;xssy5431 小拾岁月 参考链接&#xff1a;https://mp.weixin.qq.com/s/xVTCwR1ZSn5goWmc2yimVA 动画效果 需求分析 需求中涉及无线滚动&#xff0c;说明需要使用 animation 动画。另外&#xff0c;为了方便用户点击操作&#xff0c;需要给滚动对象添加鼠标…