微信小程序下拉加载下一页
小程序做得多了,有些常用功能就有必要记录一下
请看详解:
微信小程序之下拉触底时加载下一页
wxml参考:
<scroll-view class='dataContainer' scroll-y bindscrolltolower="nextDataPage"> <block wx:for="{{userList}}" wx:key="index">
<text>这是一条数据:{{item.data}}</text>
</block> <view class='bottomline' wx:if="{{userList.length > 0}}" >{{isLastPage?"没有更多数据了":"加载中..."}}</view>
<view class='bottomline' wx:if="{{userList.length == 0}}" >暂时没有数据</view> </scroll-view>
js参考:
data: {
page:1,
rows:20,
isLastPage:false,
isLoadInterface: false,
userList:[]
},
//查询数据列表
searchDataList:function(pageNum){
let that = this;
let pageIndex = pageNum;
util.ajax({
url: '接口地址',
method: "POST",
data: {
"page": pageIndex,
"rows":that.data.rows
},
success: function (res) { that.setData({
isLastPage:res.data.islast,
page: pageIndex,
isLoadInterface: false
}) if(res.data.list != undefined){
if (pageIndex > 1){
var listBefore = that.data.userList;
var currentList = res.data.list;
that.setData({
userList:listBefore.concat(currentList)
})
}else{
that.setData({
userList: res.data.list
})
}
} }, complete(e) {
that.setData({
isShowLoadPage: false
})
}
}) },
// 加载下一页数据
nextDataPage: function () {
let that = this; let islastVar = that.data.isLastPage; if (!that.data.isLoadInterface) {
if (!islastVar) {
//防止在接口未执行完再次调用接口
that.setData({
isLoadInterface: true
}) let page = that.data.page * 1 + 1; that.searchDataList(page); }
} },
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) { var that = this; let page = that.data.page;
that.searchDataList(page); }
思路:以小程序标签scroll-view作为列表容器,容器方法bindscrolltolower来触发下一页加载
页面onload后执行第一页,非第一页的数据用concat方法拼接之前的数据
防止接口未执行完反复触发bindscrolltolower里的方法,用一个变量isLoadInterface来截断
接口的数据中应有islast这类是否最后一页的参数,用来判断是否加载全部数据
微信小程序下拉加载下一页的更多相关文章
- 微信小程序上拉加载下拉刷新
微信小程序实现上拉加载下拉刷新 使用小程序默认提供方法. (1). 在xxx.json 中开启下拉刷新,需要设置backgroundColor,或者是backgroundTextStyle ,因为加载 ...
- 微信小程序 - 上拉加载下拉刷新
点击下载示例:小程序 - 上拉刷新下拉加载
- 微信小程序之下拉加载和上拉刷新
微信小程序下拉加载和上拉刷新两种实现方法 方法一:onPullDownRefresh和onReachBottom方法实现小程序下拉加载和上拉刷新 首先要在json文件里设置window属性 ...
- 微信小程序上拉加载:onReachBottom详解+设置触发距离
前端经常遇到上拉加载更多的需求,一般还涉及到翻页.小程序里已经给了下拉到底的触发方法onReachBottom(),这里记录下怎样使用这个方法实现下拉加载更多,有需要的直接看代码,有详细注释: 1.首 ...
- 微信小程序之上拉加载更多
loadmore 加载更多(分页加载) 当用户打开一个页面时,假设后台数据量庞大时,一次性地返回所有数据给客户端,页面的打开速度就会有所下降,而且用户只看上面的内容而不需要看后面的内容时,也浪费用户流 ...
- 微信小程序 - 上拉加载
demo.wxml 文件 <view wx:for="{{listdata}}" wx:key="listdata" class='listitem'& ...
- 微信小程序~上拉加载onReachBottom
代码: //页面上拉触底事件的处理函数 onReachBottom(e) { console.log("底部")// 滚动到页面执行 该 方法 wx.showToast({ tit ...
- 微信小程序上拉加载——分页
wxml: <view class="page"> <scroll-view class="imageViewCss_1" scroll-y= ...
- 微信小程序 - 上拉加载更多组件
详情用例看demo,点击下载示例:loadmore
随机推荐
- Git 分支相关
创建分支 git branch dev 切换分支 git checkout dev (dev换成-可切换为上一个使用的分支) 以上两个可合并为 git checkout -b dev 将新分支推送到远 ...
- USACO 2020 OPEN Favorite Colors【并查集-启发式合并-思考】
题目链接 题意简述 仰慕喜欢同色奶牛的奶牛喜欢同色 (禁止套娃 ,求一种方案,奶牛喜欢的颜色种数最多,多种方案求字典序最小. 题目解析 这道题我最先想到的居然是二分+并查集,我在想啥 咳咳 首先,考虑 ...
- PID算法的C语言实现
1.根据我控制算法类文章中关于PID的理论的一些描述,同时也根据网络上一些其他的PID文章,以及自己最近一个项目的实践后,总结了几套基于C语言的PID算法,由于网络中很少有人进行分享完整的PID算法实 ...
- Java并发编程 - Runnbale、Future、Callable 你不知道的那点事(二)
Java并发编程 - Runnbale.Future.Callable 你不知道的那点事(一)大致说明了一下 Runnable.Future.Callable 接口之间的关系,也说明了一些内部常用的方 ...
- Java中常量池详解
在Java的内存分配中,总共3种常量池: 转发链接:https://blog.csdn.net/zm13007310400/article/details/77534349 1.字符串常量池(Stri ...
- kali 系列学习04 - 漏洞扫描
一.比较三类漏洞扫描工具 1.Rapid7 Nexpose 适合较大网络 2.Nessus 更经济,可以申请个人版,搞之后硬盘占用达到20G 以上2个是商业软件,使用容易上手,输入IP地址就能完成所有 ...
- 把token放入请求头
1.jq 2.vue.js
- 深度分析:面试90%被问到的 Session、Cookie、Token,看完这篇你就掌握了!
Cookie 和 Session HTTP 协议是一种无状态协议,即每次服务端接收到客户端的请求时,都是一个全新的请求,服务器并不知道客户端的历史请求记录:Session 和 Cookie 的主要目的 ...
- PVE简单迁移虚拟机
工作中有2台PVE节点,但是没有做集群,如果有集群可以很方便的进行迁移.本次迁移的目的是: 目前有一台PVE1节点装的虚机资源使用较多,想迁移某台虚机到另一台PVE2. 1 备份 备份在web页面操作 ...
- c++11-17 模板核心知识(九)—— 理解decltype与decltype(auto)
decltype介绍 为什么需要decltype decltype(auto) 注意(entity) 与模板参数推导和auto推导一样,decltype的结果大多数情况下是正常的,但是也有少部分情况是 ...