微信小程序分页加载数据~上拉加载更多~小程序云数据库的分页加载
我们在开发小程序时,一个列表里难免会有很多条数据,比如我们一个列表有1000条数据,我们一下加载出来,而不做分页,将会严重影响性能。所以这一节,我们来讲讲小程序分页加载数据的实现。
老规矩,先看效果图
可以看到我们每页显示10条数据,当滑动到底部时,会加载第二页的数据,再往下滑动,就加载第三页的数据。由于我们一共21条数据,所以第三页加载完以后,会有一个“已加载全部数据”的提示。
关于云数据库可以看下面这个视频,简单了解下
本节知识点
1,小程序分页加载 2,小程序列表显示 3,云数据库的使用 4,云数据库分页请求数据的实现
一,先定义数据
我们做分页数据加载,肯定要先准备好数据,数据已经给大家准备好,如下图,文章末尾会贴出数据源和本节课源码的下载地址。
然后把数据导入到我们的云开发的数据库里,关于数据如何导入,这里不再讲解,不知道的同学,请看下面这篇文章。或者去老师历史文章里找一下。 《小程序云开发入门---云数据库数据源的导入与导出》:https://www.jianshu.com/p/c92dda4e7777
下面给大家看下我们的数据源,长什么样。其实很简单,就是简单的定义21条数据。
然后在看导入到数据库的样子。
二,分页请求数据
我们第一步准备好了数据以后,接下来就来讲讲如何在js里做分页加载数据。 首先我们这里用到了小程序云开发数据库的知识点 1,get方法:获取云数据库数据 2,skip方法:跳过前面几条数据,请求后面的数据 3,limit方法:请求多少条数据。
比如下面这段代码,就是跳过前5条,请求从第6条开始往后的10条数据,就是请求6~15的数据,我们做分页加载也就是基于这个原理。
wx.cloud.database().collection("list")
.skip(5) //从第几个数据开始
.limit(10)
下面把我们index.js的完整代码贴给大家。
//老师微信:2501902696
上面的代码就是我们实现分页加载的所有逻辑代码。简单说下代码 1,我们首先进页面时会请求前10条内容 2,10条内容请求成功以后,我们会把请求到的内容加入dataList数组,然后把dataList里的数据显示到页面上。并将currentPage加一,用于请求第二页数据。 3,当用户滑动到底部时,会触发onReachBottom事件,在这个事件里做第二页到请求。然后第二页数据请求成功以后。继续将currentPage加1,这里要记住一定,一定要请求成功以后才将currentPage +1。
三,列表布局和样式
其实index.wxml和index.wxss的代码很简单,给大家把代码贴出来。 1,index.wxml
<scroll-view scroll-y="true" bindscrolltolower="searchScrollLower">
<view class="result-item" wx:for="{{dataList}}" wx:key="item">
<text class="title">{{item.content}}</text>
</view>
<view class="loading" hidden="{{!loadMore}}">正在载入更多...</view>
<view class="loading" hidden="{{!loadAll}}">已加载全部</view></scroll-view>
2,index.wxss
page { display: flex; flex-direction: column; height: 100%;
}.result-item { display: flex; flex-direction: column; padding: 20rpx 0 20rpx 110rpx; overflow: hidden; border-bottom: 2rpx solid #e5e5e5;
}.title { height: 110rpx;
}.loading { position: relative; bottom: 5rpx; padding: 10rpx; text-align: center;
}
到这里我们就完整的实现里分页加载功能了。
小程序分页源码:https://pan.baidu.com/s/1GVATp07wsURCs7vcix72qQ
视频讲解:https://edu.csdn.net/course/detail/9604
- hihoCoder #1498 : Diligent Robots【数学】
- Codeforces Round #336 (Div. 2)【A.思维,暴力,B.字符串,暴搜,前缀和,C.暴力,D,区间dp,E,字符串,数学】
- 【防护】如何阻止SELECT * 语句
- COGS 862. 二进制数01串【dp+经典二分+字符串】
- 【AlphaGo Zero 核心技术-深度强化学习教程代码实战03】编写通用的格子世界环境类
- 冒泡排序简单操作模版及实例分析
- COGS 1299. bplusa【听说比a+b还要水的大水题???】
- python学习笔记之运算符
- 锐捷网络NBR部分路由器cookie欺骗权限绕过
- 手写快排模版
- COGS 68. [NOIP2005] 采药【01背包复习】
- UESTC 30 &&HDU 2544最短路【Floyd求解裸题】
- 我的第一个网页制作:Hello World!
- UESTC 1584 Washi与Sonochi的约定【树状数组裸题+排序】
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 详细了解JS Map,它和传统对象有什么区别?
- Java HelloWorld 學習
- Bytecodes.java
- GenerateOopMap.java
- CellTypeState.java
- 终于开始了,微软的野心将通过全场景开发平台.NET 5体现得淋漓尽致!
- 微信小程序开发实战(27):录音
- 微信小程序开发实战(28):播放、暂停、停止声音
- 微信小程序开发实战(29):控制背景音乐
- 面试:如何从 100 亿 URL 中找出相同的 URL?
- Spring Boot+Gradle+ MyBatisPlus3.x搭建企业级的后台分离框架
- 不要再对类别变量进行独热编码了
- 面试Java基础问题汇总
- K8s集群上使用Helm部署2.4.6版本Rancher集群
- 一个工作三年的同事,居然还搞不清深拷贝、浅拷贝...