微信小程序 - 上拉加载
demo.wxml 文件
<view wx:for="{{listdata}}" wx:key="listdata" class='listitem'>
<view class='title'>{{ item.store_name }}</view>
<image src='{{item.logo}}'></image>
</view> <view class="load-more-wrap">
<block wx:if="{{hasMore}}">
<view class="load-content">
<text class="weui-loading"/><text class="loading-text">玩命加载中</text>
</view>
</block>
<block wx:else>
<view class="load-content">
<text>没有更多内容了</text>
</view>
</block>
</view>
Page({
data: {
listdata:[], //数据
paginated: '',
//{total:"12", count: 10, more: 1} total数据总数,count:当前分页数据数据,more:1表示还有,0表示无数据
p:0, //当前分页;默认第一页
hasMore:true //提示
},
onLoad: function (options) {
var that = this;
var p = that.data.p;
this.loadmore();
},
onReachBottom:function(){
var that = this;
var paginated = that.data.paginated;
if (paginated.more != 0) {
this.loadmore();
}else{
that.setData({
"hasMore": false
})
}
},
loadmore:function(){
wx.showToast({
title: "玩命加载中",
icon: 'loading',
duration: 1000
})
var that = this;
var p = ++that.data.p;
wx.request({
url: 'xxx',
data: {
"json": JSON.stringify({
"demo": "xxx", "p": p
})
},
method: 'POST',
header: {
'content-type': 'application/x-www-form-urlencoded'
},
success:function(res){
if (res.data.data != 0) {
that.setData({
"listdata": that.data.listdata.concat(res.data.data), //加载数据
"paginated": res.data.paginated, //{total:"12", count: 10, more: 1} 此处主要用于上拉加载是否加载数据
"p":p
})
} else {
that.setData({
"hasMore":false
})
}
}
})
}
})
微信小程序 - 上拉加载的更多相关文章
- 微信小程序上拉加载下拉刷新
微信小程序实现上拉加载下拉刷新 使用小程序默认提供方法. (1). 在xxx.json 中开启下拉刷新,需要设置backgroundColor,或者是backgroundTextStyle ,因为加载 ...
- 微信小程序 - 上拉加载下拉刷新
点击下载示例:小程序 - 上拉刷新下拉加载
- 微信小程序上拉加载:onReachBottom详解+设置触发距离
前端经常遇到上拉加载更多的需求,一般还涉及到翻页.小程序里已经给了下拉到底的触发方法onReachBottom(),这里记录下怎样使用这个方法实现下拉加载更多,有需要的直接看代码,有详细注释: 1.首 ...
- 微信小程序~上拉加载onReachBottom
代码: //页面上拉触底事件的处理函数 onReachBottom(e) { console.log("底部")// 滚动到页面执行 该 方法 wx.showToast({ tit ...
- 微信小程序上拉加载——分页
wxml: <view class="page"> <scroll-view class="imageViewCss_1" scroll-y= ...
- 微信小程序 - 上拉加载更多组件
详情用例看demo,点击下载示例:loadmore
- 微信小程序之下拉加载和上拉刷新
微信小程序下拉加载和上拉刷新两种实现方法 方法一:onPullDownRefresh和onReachBottom方法实现小程序下拉加载和上拉刷新 首先要在json文件里设置window属性 ...
- 微信小程序下拉加载和上拉刷新两种实现方法
方法一:onPullDownRefresh和onReachBottom方法实现小程序下拉加载和上拉刷新 首先要在json文件里设置window属性 设置js里onPullDownRefresh和onR ...
- 微信小程序之上拉加载更多
loadmore 加载更多(分页加载) 当用户打开一个页面时,假设后台数据量庞大时,一次性地返回所有数据给客户端,页面的打开速度就会有所下降,而且用户只看上面的内容而不需要看后面的内容时,也浪费用户流 ...
随机推荐
- jmeter入门系列文章二 版本号介绍
转载时请标注源自:http://blog.csdn.net/musen518 jmeter版本号公布频率一般为1年,每年会有一个版本号升级 截止2015年底,最新版本号为2.13,最新最全的更新信息一 ...
- RecyclerView高速通用适配Adapter
RecyclerView Adapter 为RecyclerView提供更简单的适配器实现方式,不断更新完好中. Demo视频演示 GitHub地址 博客 使用 BaseViewHolder 的使用 ...
- mapreduce作业reduce被大量kill掉
之前有一段时间.我们的hadoop2.4集群压力非常大.导致提交的job出现大量的reduce被kill掉.同样的job执行时间比在hadoop0.20.203上面长了非常多.这个问题事实上是redu ...
- Elasticsearch短语搜索——match_phrase
找出一个属性中的独立单词是没有问题的,但有时候想要精确匹配一系列单词或者短语 . 比如, 我们想执行这样一个查询,仅匹配同时包含 "rock" 和 "climbing&q ...
- 判断DataTable某一列是否是时间列
DataTable dt = new DataTable("Table0"); dt.Columns.Add("column0", System.Type.Ge ...
- JeeSite如何正确连接SQL SERVER 数据库
JeeSite如何正确连接SQL SERVER 数据库 jeesite介绍 感谢jeesite项目的作者thinkgem. 没有你我也不会更改这数据源非了恁大的劲,,,,嘻嘻嘻说多了. JeeSite ...
- SPCircleView的使用(圆心向四周扩散动画)
今天封装了一个动画,想着以后可能会用,就封装了一下.欢迎下载 https://github.com/USimpleLife/SPCircleView 参数说明 @param centerPoint 中 ...
- 解决IOS iframe不滚动问题
.frameBox{ position: fixed; top: 0; left: 0; right: 0; bottom: 0; -webkit-overflow-scrolling: touch; ...
- Python学习日记:day6----小知识点总结
小知识点总结 一.Python2与Python3 的区别 1.Python2中可以加括号输出,也可不加输出 Python3中必须加 2.python2 中有xrange(生成器)也有range ...
- java.lang基础数据类型boolean、char、byte、short、int、long、float、double (JDK1.8)
java.lang.Boolean public static int hashCode(boolean value) { return value ? 1231 : 1237; } JDK 1.8新 ...