wxml:

<view class="page">
<scroll-view class="imageViewCss_1" scroll-y="true" bindscrolltolower="toLower" lower-threshold="-100">
<view class="weui-slidecells" wx:for="{{arrayProject}}" wx:for-item="itemProjec" wx:key="id" data-datas="{{itemProjec}}">
<mp-slideview buttons="{{slideButtons}}" icon="true" bindbuttontap="slideButtonTap">
<view class="weui-slidecell">
<view class="showTimeCss">
{{itemProjec.operate_time}}
</view>
            <!--内容为自定义对象-->
            温度:{{itemProjec.id}}℃ 湿度:{{itemProjec.id}}%
</view>
</mp-slideview>
</view>
<view wx:if="{{state==0}}">
<view>没有更多了</view>
</view>
</scroll-view>
</view>

js:

data: {
//每页显示的行数:
pagesize: 20,
//页码(从1开始):
p: 1,
//用于标识是否还有更多的状态
state: 1,
//用于渲染页面的数组
arrayProject: [],
//用于数组的追加和暂存
allProject: [],
},
onLoad: function (options) {
var mythis = this;
getproinfo(this.data.pagesize, this.data.p, mythis)
},
toLower: function () {
var that = this;
var state = that.data.state;
if (state > 0){
wx.showLoading({
title: '加载中...',
});
that.data.p = that.data.p + 1;
getproinfo(this.data.pagesize, this.data.p, that);
wx.hideLoading();
}
},
function getproinfo(pagesize, p, mythis) {
wx.request({
url: "******",
method: 'POST',
header: {
'content-type': 'application/x-www-form-urlencoded'
},
data: {
//其他参数"page": p,
"limit": pagesize
},
success: function (res) {
var resData = res.data;
var resLength = res.data.length;
//如果搜出来的结果<1 就说明后面已经没数据可加载了,所以将state设为0
if (resLength < 1)
mythis.setData({
state: 0
});
else {
var state1 = 1;
//如果有数据,但小于每次期望加载的数据量(pagesize),将state设为0,表示后面已没有数据可加载
if (resLength < mythis.data.pagesize)
var state1 = 0;
//循环将结果集追加到数组后面
for (var i = 0; i < resLength; i++) {
mythis.data.allProject.push(resData[i]);
}
mythis.setData({
arrayProject: mythis.data.allProject,
state: state1
});
}
//console.log(mythis.data.arrayProject)
},
fail: function (res) {
//console.log(res);
}
});
}

wxss:

page,
.page{
height: 100%;
}
.imageViewCss_1{
width: 100%;
height: 100%;
}
.showTimeCss{
font-size:14px;
font-family: NSimSun;
}

微信小程序上拉加载——分页的更多相关文章

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

    微信小程序实现上拉加载下拉刷新 使用小程序默认提供方法. (1). 在xxx.json 中开启下拉刷新,需要设置backgroundColor,或者是backgroundTextStyle ,因为加载 ...

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

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

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

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

  4. 微信小程序 - 上拉加载

    demo.wxml  文件 <view wx:for="{{listdata}}" wx:key="listdata" class='listitem'& ...

  5. 微信小程序~上拉加载onReachBottom

    代码: //页面上拉触底事件的处理函数 onReachBottom(e) { console.log("底部")// 滚动到页面执行 该 方法 wx.showToast({ tit ...

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

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

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

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

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

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

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

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

随机推荐

  1. ASP.NET MVC IOC依赖注入之Autofac系列(二)- WebForm当中应用

    上一章主要介绍了Autofac在MVC当中的具体应用,本章将继续简单的介绍下Autofac在普通的WebForm当中的使用. PS:目前本人还不知道WebForm页面的构造函数要如何注入,以下在Web ...

  2. Go-包

    Go-包 包的介绍以及使用 为什么使用包 为了更加好的维护代码 包的位置 必须再GOPATH路径的src中 能导入的内容 导入的内容名称必须是大写字母开头不然无法导入 包 src中的一个文件夹为一个包 ...

  3. 2018简约商务工作汇报工作总结公司培训团队介绍PPT模

    这几款ppt模板都是简约大气类型的,32页足够丰富,有完整结构框架,可以修改文字图片直接套用模板,是通用的商务ppt模板. 模版来源:http://ppt.dede58.com/gongzuohuib ...

  4. echarts 柱状图

    效果: 图一:Y轴显示百分比  柱状图定点显示数量个数 图二:x轴  相同日期对应的每个柱子显示不同类型的数量 代码: 容器: <div id="badQuaAnalyze" ...

  5. iOS开发中,获取图片之后保存或下载到本地相册中

    #pragma mark 先获取本地图片或者网络图片 - (void)saveHeaderImageWith:(NSString *)path { UIImage *img = [UIImage im ...

  6. Nginx之HTTPS

    Nginx之HTTPS 1. HTTPS安全证书基本概述 为什么需要使用HTTPS,因为HTTP不安全,当我们使用http网站时,会遭到劫持和篡改,如果采用https协议,那么数据在传输过程中是加密的 ...

  7. requests---requests上传图片

    我们在做接口测试的时候肯定会遇到一些上传图片,然后进行校验,今天我们一起学习通过requests上传图片,查看是否上传成功 抓取上传接口 这里我以百度为例子进行操作,为啥要用百度呢,主要上传文件比较简 ...

  8. 7.jenkins 按标签发布

    jenkins 如果要按标签发布,需要安装下, Git Parameter Plug-In   的 插件. 之前我们的jar包项目.  我们运行的时候是以下内容. 现在我们对这个jar进行小范围修改. ...

  9. git(1) 比较两个不同版本的文件

    git diff commit_id1:file_name commit_id2:file_name 或者 git diff commit_id1 commit_id2 -- file_name co ...

  10. JavaScript内置对象及常见API

    一.全局属性 Infinity:表示正无穷大 NaN:非数字值 undefined:未定义的值 decodeURI():对encodeURI()转义的字符串解码 decodeURIComponent( ...