微信小程序 - (下拉)加载更多数据
注意和后端配合就行了,前端也只能把数据拼接起来!
无论是下拉加载还是加载更多,一样的道理!
注意首次加载传递参数
注意每次加载数据数
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.首 ...
- 微信小程序 - 上拉加载下拉刷新
点击下载示例:小程序 - 上拉刷新下拉加载
随机推荐
- 5日均线MACD
1.5日均线: 5日均线是股市术语,就是股票5天的成交价格或指数的平均值,所对应的是股价的5日均线和指数的5日均线(5MA).均线指标实际上是移动平均线指标的简称. 一般在K 线图中会有3 条或4 条 ...
- ios开发怎样才能做到代码和界面彻底分离,方便换肤?
设想一下,你现在手底下有N个开发人员,你如何让这些人参与到一个ios开发项目中来?而不是独自一个人完成.
- 真实的人类第三季/全集Humans迅雷下载
Channel 4及AMC宣布续订<真实的人类 Humans>第三季,下季为8集:新季拍摄将在秋季开始,主要角色会回归.该剧设定在机器人Synth被繁忙都市人广泛使用的世界,呈现人类与机器 ...
- Lua date转秒数
之前写过一篇关于把秒转换成指定的日期格式 Lua date format 接到一个需求,需要从配置文件中读取活动显示时间段:startDate ~ endDate(格式为:yyyy-mm-dd H ...
- Table中collapseColumns,stretchColumns
collapseColumns 设置需要被隐藏的列序号(序号从0开始) shrinkColumns 设置允许被首夺的列的序号(序号从0开始) stretchColumns 设置允许被拉 ...
- WinForm IME输入法BUG完美修复
本文来自http://hi.baidu.com/wingingbob/item/a2cb3fc0fe3bd1bb0d0a7b5b <WinForm IME输入法BUG测试>里,我描述了在. ...
- .NET零基础入门之02:源码控制管理器的使用
一:概述 源码控制管理器,也叫"版本控制"软件,用于存储.追踪目录(文件夹)和文件的修改历史,是软件开发者的必备工具,是专业软件公司的基础工具.它主要是协助在多人团队中控制代码,防 ...
- 单页面应用SPA和多页面应用MPA
单页面应用(SinglePage Web Application,SPA) 只有一张Web页面的应用,是一种从Web服务器加载的富客户端,单页面跳转仅刷新局部资源 ,公共资源(js.css等)仅需加载 ...
- HotSpot Generations
本文主要介绍HotSpot JVM的 Generations 机制, 原文来自 Oracle 文档 Java SE 6 HotSpot[tm] Virtual Machine Garbage Col ...
- jquery each循环遍历完再执行的方法 因为each是异步的 所以要加计数器.
query each循环遍历完再执行的方法因为each是异步的 所以要加计数器.var eachcount=0;$(“.emptytip”).each(function(){ eachcount++c ...