微信小程序 无限加载 上拉加载更多
加载更多,其实就是再次向接口发送请求,把返回的数据,追加到渲染页面的数组里的过程,具体实现实例如下:
demo.js
// pages/project/project.js
const app = getApp()
Page({ /**
* 页面的初始数据
*/
data: { //每页显示的行数:
pagesize: 7,
//页码(从1开始):
p: 1, //排序方式:
paixu: 'viewcount',
//升序或降序:
order: 'desc', //用于标识是否还有更多的状态
state: 1, //用于渲染页面的数组
arrayProject:[], //用于数组的追加和暂存
allProject:[],
}, /**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var mythis = this;
getproinfo( this.data.pagesize, this.data.p,mythis)
}, /**
* 点击加载更多时触发
*/
loadMore:function(){
var mythis = this;
wx.showLoading({
title: '玩命加载中...',
});
mythis.data.p = mythis.data.p + 1;
getproinfo(this.data.pagesize, this.data.p,mythis);
wx.hideLoading();
}, /**
* 页面上拉触底事件的处理函数,与点击加载更多做同样的操作
*/
onReachBottom: function () {
var mythis = this;
wx.showLoading({
title: '玩命加载中...',
});
mythis.data.p = mythis.data.p + 1;
getproinfo(this.data.pagesize, this.data.p,mythis);
wx.hideLoading(); }, }) /**
* 获取项目列表
*/
function getproinfo(pagesize, p, mythis){ wx.request({
url: app.globalData.host + 'index.php/Ho/getproinfo',
method: 'post',
data: {
pagesize: pagesize,
p:p
},
header: {
'content-type': 'application/x-www-form-urlencoded'
}, success: function (res) {
//如果搜出来的结果<1 就说明后面已经没数据可加载了,所以将state设为0
if (res.data.rows.length<1)
mythis.setData({
state: 0
});
else{
var state1 = 1;
//如果有数据,但小于每次期望加载的数据量(pagesize),将state设为0,表示后面已没有数据可加载
if (res.data.rows.length < mythis.data.pagesize)
var state1 = 0;
//循环将结果集追加到数组后面
for (var i = 0; i < res.data.rows.length; i++) {
mythis.data.allProject.push(res.data.rows[i]);
}
mythis.setData({
arrayProject: mythis.data.allProject,
state: state1
});
}
console.log(mythis.data.arrayProject)
},
fail: function (res) {
console.log(res);
}
});
}
demo.html
<view class='projectlist' >
<view class='project' wx:for="{{arrayProject}}" wx:for-item="itemProjec" wx:key="id" data-datas="{{itemProjec}}" bindtap='projectDetail'>
<view class='projectText'> {{itemProjec.gongchengmingcheng}} </view>
<view class='projectleibie label'> {{arrayCategory[itemProjec.leixing].name}} </view>
<view class='projectjiesuan label'> {{arraySchedule[itemProjec.jieduan].name}} </view>
<view class='projectTime'> {{itemProjec.faburiqi}} </view>
</view>
//实现屏幕上拉加载更多
<view class='remind' wx:if="{{state==0}}"><view>没有更多了</view></view>
</view>
微信小程序 无限加载 上拉加载更多的更多相关文章
- 【微信小程序】scroll-view 的上拉加载和下拉刷新
1.在微信小程序中,想到 下拉刷新 和 上拉加载,如果是整个页面都拖动的话,可以在页面配置中,配置 enablePullDownRefresh 和 onReachBottomDistance 然后在 ...
- 微信小程序开发——列表分页上拉加载封装实现(订单列表为例,订单状态改变后刷新列表滚动位置不变)
业务需求: 业务需求是给订单列表添加分页功能,也就是上拉加载这种每次只请求加载固定数量的数据. 需求分析: 对业务来说就是简单的分页上拉加载,但是对于技术实现来说,除了要处理分页数据的累加加载,还要处 ...
- wepy小程序实现列表分页上拉加载(2)
第一篇:wepy小程序实现列表分页上拉加载(1) 本文接着上一篇内容: 4.优化-添加加载动画 (1)首先写加载动画的结构和样式 打开list.wpy文件 template结构代码: <temp ...
- wepy小程序实现列表分页上拉加载(1)
使用wepy开发微信小程序商城第一篇:项目初始化 使用wepy开发微信小程序商城第二篇:路由配置和页面结构 列表页效果图: 1.新建列表页 (1)在pages里面新建一个list.wpy文件 初始代码 ...
- [微信小程序] 微信小程序获取用户定位信息并加载对应城市信息,wx.getLocation,腾讯地图小程序api,微信小程序经纬度逆解析地理信息
因为需要在小程序加个定位并加载对应城市信息 然而小程序自带api目前只能获取经纬度不能逆解析,虽然自己解析方式,但是同时也要调用地图,难道用户每次进小程序还要强行打开地图选择地址才定位吗?多麻烦也不利 ...
- 微信小程序之自定义select下拉选项框组件
知识点:组件,animation,获取当前点击元素的索引与内容 微信小程序中没有select下拉选项框,所以只有自定义.自定义的话,可以选择模板的方式,也可以选择组件的方式来创建. 这次我选择了组件, ...
- 微信小程序 在canvas画布上划动,页面禁止滑动
要实现微信小程序 在canvas画布上划动,页面禁止滑动,不仅要设置disable-scroll="true",还要要给canvas绑定一个触摸事件才能生效. <canvas ...
- 微信小程序简单封装图片上传组件
微信小程序简单封装图片上传组件 希望自己 "day day up" -----小陶 我从哪里来 在写小程序的时候需要上传图片,个人觉得官方提供的 Uploader 组件不是太好用, ...
- 微信小程序(2)--下拉刷新和上拉加载更多
下拉刷新 1.首先在.json文件中配置(如果在app.json文件中配置,那么整个程序都可以下拉刷新.如果写在具体页面的.json文件中,那么就是对应的页面下拉刷新.) 具体页面的.json文件: ...
随机推荐
- ros topic 发布一次可能会接收不到数据
rostopic pub - /hdw_update hdw_driver/update_file_msg A B C D 系统提示: publishing and latching message ...
- spring集成shiro报错解决(no bean named 'shiroFilter' is defined)
引言: 本人在使用spring集成shiro是总是报“no bean named 'shiroFilter' is defined”,网上的所有方式挨个试了一遍,又检查了一遍, 还是没有解决,最后,抱 ...
- Matlab中的基本数据类型介绍
Matlab中支持的数据类型包括: 逻辑(logical)字符(char)数值(numeric)元胞数组(cell)结构体(structure)表格(table)函数句柄(function handl ...
- selenium Grid2 分布式自动化测试环境搭建
一.Selenium Server 环境配置 1.selenium grid的组成与作用:由一个集线器hub和多个客户机node组成,如果你的程序需要在不用的浏览器,不同的操作系统上测试,而且比较多的 ...
- 第 3 章 镜像 - 019 - 使用公共 Registry
保存和分发镜像的最直接方法就是使用 Docker Hub.https://hub.docker.com/ Docker Hub 是 Docker 公司维护的公共 Registry.用户可以将自己的镜像 ...
- 全栈性能测试修炼宝典--Jmeter实战(二)
性能测试初体验 1.测试分类 从图中可以看出,性能测试在整个软件测试环节中占了50%的内容,比如负载测试.压力测试.性能测试.大数据量测试.恢复测试.内容泄露测试.竞品测试(比较测试)和可靠性测试. ...
- 雷林鹏分享:jQuery EasyUI 窗口 - 自定义带有工具条和按钮的对话框
jQuery EasyUI 窗口 - 自定义带有工具条和按钮的对话框 您可以创建一个带有工具栏(toolbar)和按钮(button)的对话框(dialog),可以从 HTML 标记创建.这个教程描述 ...
- Exception:public class feign.codec.EncodeException feign.codec.EncodeException: 'Content-Type' cannot contain wildcard type '*'
一.异常出现的场景 Spring Cloud 服务A通过feign调用服务B;之前是好好的,但今天突然就不好了,抛以下异常===> 出现原因补充,Spring Boot默认的JSON方式 Ja ...
- LeetCode--404--左叶子之和
问题描述: 计算给定二叉树的所有左叶子之和. 示例: 3 / \ 9 20 / \ 15 7 在这个二叉树中,有两个左叶子,分别是 9 和 15,所以返回 24 方法:recursive class ...
- Could not find method google() for arguments [] on repository container.
出这个问题主要是你Gradle版本太低的原因,一般要使用4.0+的版本 所以你需要更新你的Gradle版本至4.0+呦 tips:注意你的AndroidStudio版本应该是3.0以上,因为Gradl ...