微信小程序上拉加载——分页
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). 在xxx.json 中开启下拉刷新,需要设置backgroundColor,或者是backgroundTextStyle ,因为加载 ...
- 微信小程序 - 上拉加载下拉刷新
点击下载示例:小程序 - 上拉刷新下拉加载
- 微信小程序上拉加载:onReachBottom详解+设置触发距离
前端经常遇到上拉加载更多的需求,一般还涉及到翻页.小程序里已经给了下拉到底的触发方法onReachBottom(),这里记录下怎样使用这个方法实现下拉加载更多,有需要的直接看代码,有详细注释: 1.首 ...
- 微信小程序 - 上拉加载
demo.wxml 文件 <view wx:for="{{listdata}}" wx:key="listdata" class='listitem'& ...
- 微信小程序~上拉加载onReachBottom
代码: //页面上拉触底事件的处理函数 onReachBottom(e) { console.log("底部")// 滚动到页面执行 该 方法 wx.showToast({ tit ...
- 微信小程序 - 上拉加载更多组件
详情用例看demo,点击下载示例:loadmore
- 微信小程序之下拉加载和上拉刷新
微信小程序下拉加载和上拉刷新两种实现方法 方法一:onPullDownRefresh和onReachBottom方法实现小程序下拉加载和上拉刷新 首先要在json文件里设置window属性 ...
- 微信小程序下拉加载和上拉刷新两种实现方法
方法一:onPullDownRefresh和onReachBottom方法实现小程序下拉加载和上拉刷新 首先要在json文件里设置window属性 设置js里onPullDownRefresh和onR ...
- 微信小程序之上拉加载更多
loadmore 加载更多(分页加载) 当用户打开一个页面时,假设后台数据量庞大时,一次性地返回所有数据给客户端,页面的打开速度就会有所下降,而且用户只看上面的内容而不需要看后面的内容时,也浪费用户流 ...
随机推荐
- Selenium(十四):自动化测试模型介绍、模块化驱动测试案例、数据驱动测试案例
1. 自动化测试模型介绍 随着自动化测试技术的发展,演化为了集中模型:线性测试.模块化驱动测试.数据驱动测试和关键字驱动测试. 下面分别介绍这几种自动化测试模型的特点. 1.1 线性测试 通过录制或编 ...
- Go-for循环
一.第一种情况(死循环) package main import "fmt" func main() { for{ fmt.Println("fuck") } ...
- IDEA 2019.2版本下载安装与PJ教程
场景 IDEA版本过低的话会导致某些IDEA插件没法安装,比如Lombok插件和EasyCode插件等. 实现 双击exe安装包 点击Next 选择安装路径,点击Next 设置桌面快捷方式,增加到右键 ...
- JupyterLab安装与配置虚拟环境
JupyterLab安装: 推荐使用miniconda,相比于anaconda更加简洁,下载连接:https://mirrors.tuna.tsinghua.edu.cn/anaconda/minic ...
- 033.[转] Java 工程师成神之路 | 2019正式版
Java 工程师成神之路 | 2019正式版 原创: Hollis Hollis 2月18日 https://mp.weixin.qq.com/s/hlAn6NPR1w-MAwqghX1FPg htt ...
- SQL注入:DNS注入
DNS注入原理: 通过我们构造的数据,访问搭建好的DNS服务器,查看DNS访问的日志即可获取我们想要得到的数据. DNS注入使用场景: 在某些无法直接利用漏洞获得回显的情况下,但是目标可以发起请求,这 ...
- Linxu:进程的管理与进程的延迟性&周期性调度
进程的延迟与周期调度 进程的概念 进程:开始执行但是还没有结束的程序的实例 程序:包含可执行代码的文件 进程由程序产生,是一个运行着的.要占系统资源的程序,进程不等于程序. 进程分为:交互进程.批处理 ...
- GetPrivateProfileInt 使用方法
GetPrivateProfileInt =>从ini文件取得数值 <参数> lpApplicationName String,指定在其中查找条目的小节.注意这个字串是不区分大小写的 ...
- 用VB脚本复制文件夹并跳过重复文件
VB中可通过 scripting.filesystemobject 对象操作文件,其中复制文件或文件夹的函数参数可选覆盖或不覆盖.选择覆盖时,如果目标路径存在同名文件或文件夹,则替换掉已存在的文件.而 ...
- [ Python入门教程 ] Python文件基本操作_shutil模块
shutil模块是对os模块中文件操作的补充,提供文件和目录的移动.复制.打包.压缩.解压等功能 shutil常用函数 shutil.copyfile(src, dst) 复制文件, 如果ds ...