微信小程序 - (下拉)加载更多数据
注意和后端配合就行了,前端也只能把数据拼接起来!
无论是下拉加载还是加载更多,一样的道理!
注意首次加载传递参数
注意每次加载数据数
wxml
<view class='table-rank'>
<view class='tables center' wx:for="{{ranklist}}" wx:for-index="idx" wx:key="prototype">
<view class='stage-rank'>
{{idx+1}}
</view>
<view class='name'>{{item.name}}</view>
<view class='price'>{{item.count}}</view>
</view>
</view> <view class='more'>
<button loading="{{loading}}" disabled="{{disabled}}" catchtap="setLoading">{{loadText}}</button>
</view>
js
var app = getApp().globalData; Page({
data: {
loadText: '加载更多',
ranklist: [],
count: 1
}, onLoad: function(res) {
// 首次加载:传参数num:0
let num = 0;
let _page = this;
let uid = wx.getStorageSync('uinfo').uid; wx.request({
url: 'url',
data: {
uid,
num
},
header: {
'content-type': 'application/json'
},
method: 'GET',
dataType: 'json',
responseType: 'text',
success(res) {
_page.setData({
ranklist: res.data.all_list,
me: res.data.me
});
}
})
}, //点击 加载更多 按钮
setLoading(e) { let _this = this;
let _page = this; // 暂存数据
let ranklistBefore = _this.data.ranklist; let uid = wx.getStorageSync('uinfo').uid; // 每次加载数据条数(10)
let num = _this.data.count++ * 10; wx.request({
url: app.api.simulation_ranking,
data: {
uid,
num
},
header: {
'content-type': 'application/json'
},
method: 'GET',
dataType: 'json',
responseType: 'text',
success(res) {
// 每次加载数据,请求一次就发送10条数据过来
let eachData = res.data.all_list; if (eachData.length == 0) {
wx.showToast({
title: '没有更多数据了!~',
icon: 'none'
})
} else {
wx.showToast({
title: '数据加载中...',
icon: 'none'
})
} _page.setData({
loadText: "数据请求中",
loading: true,
ranklist: ranklistBefore.concat(eachData),
loadText: "加载更多",
loading: false,
});
}
})
}
});
微信小程序 - (下拉)加载更多数据的更多相关文章
- 微信小程序下拉加载和上拉刷新两种实现方法
方法一:onPullDownRefresh和onReachBottom方法实现小程序下拉加载和上拉刷新 首先要在json文件里设置window属性 设置js里onPullDownRefresh和onR ...
- 微信小程序下拉加载下一页
小程序做得多了,有些常用功能就有必要记录一下 请看详解: 微信小程序之下拉触底时加载下一页 wxml参考: <scroll-view class='dataContainer' scroll-y ...
- 微信小程序之上拉加载更多
loadmore 加载更多(分页加载) 当用户打开一个页面时,假设后台数据量庞大时,一次性地返回所有数据给客户端,页面的打开速度就会有所下降,而且用户只看上面的内容而不需要看后面的内容时,也浪费用户流 ...
- 微信小程序 下拉加载
在 Page 中定义 onPullDownRefresh 处理函数,监听该页面用户下拉刷新事件. 例: Page({ onPullDownRefresh: function(){ wx.stopPul ...
- 微信小程序 - 上拉加载更多组件
详情用例看demo,点击下载示例:loadmore
- 小程序上拉加载更多数据(onReachBottom)
<!--pages/test/test.wxml--> <block wx:for="{{list}}" wx:key="item.id"&g ...
- 微信小程序之下拉加载和上拉刷新
微信小程序下拉加载和上拉刷新两种实现方法 方法一:onPullDownRefresh和onReachBottom方法实现小程序下拉加载和上拉刷新 首先要在json文件里设置window属性 ...
- ASP.NET仿新浪微博下拉加载更多数据瀑布流效果
闲来无事,琢磨着写点东西.貌似页面下拉加载数据,瀑布流的效果很火,各个网站都能见到各式各样的展示效果,原理大同小异.于是乎,决定自己写一写这个效果,希望能给比我还菜的菜鸟们一点参考价值. 在开始之前, ...
- 微信小程序上拉加载:onReachBottom详解+设置触发距离
前端经常遇到上拉加载更多的需求,一般还涉及到翻页.小程序里已经给了下拉到底的触发方法onReachBottom(),这里记录下怎样使用这个方法实现下拉加载更多,有需要的直接看代码,有详细注释: 1.首 ...
- 微信小程序 - 上拉加载下拉刷新
点击下载示例:小程序 - 上拉刷新下拉加载
随机推荐
- iphone6/6+ 适配心得
1. 文档综述 自iphone6/6+发布,ios屏幕分辨率的种类一下从2种变成了四种.对于以前很多手写UI,并且使用绝对坐标的UI,可能会发生异变,本文主要介绍在纯手写UI条件下,ios应用 ...
- Fidder发送Get、POST请求
Composer: 1.Get请求 a) 请求头加上: Content-Type: application/json; charset=utf-8 b) url:http://localh ...
- Java中的线程实现
线程实现有两种方法: 1.写一个类来继承Thread类,然后复写run()方法. public class HelloThread extends Thread { public void run() ...
- Visual Studio 2013 智能提示功能消失解决办法
Visual Studio 2013中,智能提示功能突然用不了,查了一下,使用命令行重置VS的方法解决了这个问题.步骤如下: 开始菜单 -->所有程序-->Visual Studio 20 ...
- information_schema系列六(索引,表空间,权限,约束相关表)
information_schema系列六(索引,表空间,权限,约束相关表) 1: STATISTICS 这个表提供的是关于表的索引信息: INFORMATION_SCHEMA Name SHOW ...
- 使用C++ Builder XE5获取Sensor值之Light Sensor
献上代码C++代码,仅供參考. 若使用Delphi.请參考文献,http://blogs.embarcadero.com/davidi/2013/12/02/43032/ 一定记得要安装FireMon ...
- JSON与XML的区别比较(转)
原文链接:JSON与XML的区别比较 1.定义介绍 (1).XML定义扩展标记语言 (Extensible Markup Language, XML) ,用于标记电子文件使其具有结构性的标记语言,可以 ...
- 第一章 Typescript 介绍
Typescript 介绍 一.Typescript 简介 Typescript 是微软开发的 Javascript 的超集,Typescript 兼容 Javascript,可以载入 Javascr ...
- Hash dump神器 (转)
在Win7 x64位下无压力测试通过. 0 / INTRO========= Quarks PwDump 是一个Win32环境下的系统授权信息导出工具,目前除此之外没有任何一款工具可以导出如此全面的信 ...
- AVL树原理及实现 +B树
1. AVL定义 AVL树是一种改进版的搜索二叉树.对于一般的搜索二叉树而言,如果数据恰好是按照从小到大的顺序或者从大到小的顺序插入的,那么搜索二叉树就对退化成链表,这个时候查找,插入和删除的时间都会 ...