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

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

注意首次加载传递参数

注意每次加载数据数

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. Windows 和 Linux 平台下的端口转发工具

    原文地址: http://unmi.cc/windows-linux-port-forwarding/ 这里记录一下我曾经使用过的几个端口转发工具,即端口映射.端口重定向,和 NAT 也是差不多的概念 ...

  2. WordPress主题开发:get_term_by和get_term_link

    学习目的: 某一个分类的名称.别名.和id都可以到后台自己去找,但这样找比较麻烦还容易看错,wordpress提供了下面两个函数get_term_by和get_term_link,只要提供别名.名称或 ...

  3. Raspbian 中国软件源

    转自:http://shumeipai.nxez.com/2013/08/31/raspbian-chinese-software-source.html 花了些时间整理了目前最新的树莓派中国大陆地区 ...

  4. jquery插件--在input下输入密码时提示大写锁定键

    //密码大写输入提示 function capitalTip(id){ $('#' + id).after('<div class="capslock" id="c ...

  5. JAVA Iterator 转成 List

    List转到Iterator容易,JDK本身就支持,反过来的实现方式如下:1.使用Apache Common Collections 2.自己实现的方法转换3.Guaa实现转换 方式1: #Apach ...

  6. SEO如何利用百度知道日引流上千IP

    个人小站长.SEO们经常为网站没有流量而发愁,一个没有流量的网站就像一个不喝水的人,迟早得死.没有流量,就没有PV,也就是说你的网站只是 给你一个人看的,那做站有什么意义呢?网站上所发布的内容都是分享 ...

  7. 基于Vue、Bootstrap的Tab形式的进度展示

    最近基于Vue.Bootstrap做了一个箭头样式的进度展示的单页应用,并且支持了对于一个本地JS文件的检索,通过这个单页应用,对于Vue的理解又深入了一些.在这里把主要的代码分享出来. 本单页应用实 ...

  8. Apache Jmeter 教程

    Jmeter是一款优秀的开源测试工具, 是每个资深测试工程师,必须掌握的测试工具,熟练使用Jmeter能大大提高工作效率. 熟练使用Jmeter后, 能用Jmeter搞定的事情,你就不会使用LoadR ...

  9. LRU和LFU的区别

    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/guoweimelon/article/details/50855351 一.概念介绍 LRU和LFU ...

  10. 安装chrome

    安装chrome 在suse12中安装chrome时,提示 lsb >= 4.0 is needed by google-chrome-stable 到http://rpm.pbone.net当 ...