注意和后端配合就行了,前端也只能把数据拼接起来!

无论是下拉加载还是加载更多,一样的道理!

注意首次加载传递参数

注意每次加载数据数

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,
});
}
})
}
});

  

微信小程序 - (下拉)加载更多数据的更多相关文章

  1. 微信小程序下拉加载和上拉刷新两种实现方法

    方法一:onPullDownRefresh和onReachBottom方法实现小程序下拉加载和上拉刷新 首先要在json文件里设置window属性 设置js里onPullDownRefresh和onR ...

  2. 微信小程序下拉加载下一页

    小程序做得多了,有些常用功能就有必要记录一下 请看详解: 微信小程序之下拉触底时加载下一页 wxml参考: <scroll-view class='dataContainer' scroll-y ...

  3. 微信小程序之上拉加载更多

    loadmore 加载更多(分页加载) 当用户打开一个页面时,假设后台数据量庞大时,一次性地返回所有数据给客户端,页面的打开速度就会有所下降,而且用户只看上面的内容而不需要看后面的内容时,也浪费用户流 ...

  4. 微信小程序 下拉加载

    在 Page 中定义 onPullDownRefresh 处理函数,监听该页面用户下拉刷新事件. 例: Page({ onPullDownRefresh: function(){ wx.stopPul ...

  5. 微信小程序 - 上拉加载更多组件

    详情用例看demo,点击下载示例:loadmore

  6. 小程序上拉加载更多数据(onReachBottom)

    <!--pages/test/test.wxml--> <block wx:for="{{list}}" wx:key="item.id"&g ...

  7. 微信小程序之下拉加载和上拉刷新

    微信小程序下拉加载和上拉刷新两种实现方法 方法一:onPullDownRefresh和onReachBottom方法实现小程序下拉加载和上拉刷新 首先要在json文件里设置window属性       ...

  8. ASP.NET仿新浪微博下拉加载更多数据瀑布流效果

    闲来无事,琢磨着写点东西.貌似页面下拉加载数据,瀑布流的效果很火,各个网站都能见到各式各样的展示效果,原理大同小异.于是乎,决定自己写一写这个效果,希望能给比我还菜的菜鸟们一点参考价值. 在开始之前, ...

  9. 微信小程序上拉加载:onReachBottom详解+设置触发距离

    前端经常遇到上拉加载更多的需求,一般还涉及到翻页.小程序里已经给了下拉到底的触发方法onReachBottom(),这里记录下怎样使用这个方法实现下拉加载更多,有需要的直接看代码,有详细注释: 1.首 ...

  10. 微信小程序 - 上拉加载下拉刷新

    点击下载示例:小程序 - 上拉刷新下拉加载

随机推荐

  1. iphone6/6+ 适配心得

    1.     文档综述 自iphone6/6+发布,ios屏幕分辨率的种类一下从2种变成了四种.对于以前很多手写UI,并且使用绝对坐标的UI,可能会发生异变,本文主要介绍在纯手写UI条件下,ios应用 ...

  2. Fidder发送Get、POST请求

      Composer:   1.Get请求 a) 请求头加上: Content-Type: application/json; charset=utf-8   b) url:http://localh ...

  3. Java中的线程实现

    线程实现有两种方法: 1.写一个类来继承Thread类,然后复写run()方法. public class HelloThread extends Thread { public void run() ...

  4. Visual Studio 2013 智能提示功能消失解决办法

    Visual Studio 2013中,智能提示功能突然用不了,查了一下,使用命令行重置VS的方法解决了这个问题.步骤如下: 开始菜单 -->所有程序-->Visual Studio 20 ...

  5. information_schema系列六(索引,表空间,权限,约束相关表)

    information_schema系列六(索引,表空间,权限,约束相关表) 1: STATISTICS 这个表提供的是关于表的索引信息:   INFORMATION_SCHEMA Name SHOW ...

  6. 使用C++ Builder XE5获取Sensor值之Light Sensor

    献上代码C++代码,仅供參考. 若使用Delphi.请參考文献,http://blogs.embarcadero.com/davidi/2013/12/02/43032/ 一定记得要安装FireMon ...

  7. JSON与XML的区别比较(转)

    原文链接:JSON与XML的区别比较 1.定义介绍 (1).XML定义扩展标记语言 (Extensible Markup Language, XML) ,用于标记电子文件使其具有结构性的标记语言,可以 ...

  8. 第一章 Typescript 介绍

    Typescript 介绍 一.Typescript 简介 Typescript 是微软开发的 Javascript 的超集,Typescript 兼容 Javascript,可以载入 Javascr ...

  9. Hash dump神器 (转)

    在Win7 x64位下无压力测试通过. 0 / INTRO========= Quarks PwDump 是一个Win32环境下的系统授权信息导出工具,目前除此之外没有任何一款工具可以导出如此全面的信 ...

  10. AVL树原理及实现 +B树

    1. AVL定义 AVL树是一种改进版的搜索二叉树.对于一般的搜索二叉树而言,如果数据恰好是按照从小到大的顺序或者从大到小的顺序插入的,那么搜索二叉树就对退化成链表,这个时候查找,插入和删除的时间都会 ...