微信小程序 无限加载 上拉加载更多
加载更多,其实就是再次向接口发送请求,把返回的数据,追加到渲染页面的数组里的过程,具体实现实例如下:
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文件: ...
随机推荐
- file_put_contents结合print_r,打造日志功能
<?php $log = []; $log['name'] = '张三'; $log['age'] = '15'; $log['date'] = date('Y-m-d'); echo prin ...
- oracle 12c创建可插拔数据库(PDB)及用户
由于oracle 12c使用了CDB-PDB架构,类似于docker,在container-db内可以加载多个pluggable-db,因此安装后需要额外配置才能使用. 一.修改listener.or ...
- 要使用myConfig.properties配置文件作为实体类的映射文件的话,格式要用=,最关键的要和实例类中通过反射获取值的KEY要一样,不样会反射取不到值
ABC=https://fsdfsdf.iy.comABCId=L2345345ZhP345ABCKey=sfdf4234f234dhE6Ut0aABCName=Gassd010 上面是myConfi ...
- CoordinatorLayout实现的效果(标题栏效果)
一.效果 CoordinatorLayouy是一个能够协调子布局的容器布局. 使用引入: compile 'com.android.support:design:24.1.1' 常见的使用方法如下:1 ...
- mint18.3 升级linux-libc-dev_4.4.0-102.132 导致外接显示屏无法旋转,设置分辨率
—————————————————— 补记: 虽然修改之后能旋转,重启还是不行,而且修改显示,经常卡死.还是在第二天早上重装了. 吸取教训,尽量不apt dist-upgrade,不升级内核. 这只是 ...
- AD原理图统一命名
1 Tools->Annotate Schematics 调出统一命名窗口 2 勾选要统一命名的原理图 3 Update Changes List 4 Accept Changes(creat ...
- 移动端rem适配布局
dome如下: <!doctype html><html><head> <meta charset="UTF-8" /> <m ...
- caffe在solverstate的基础上继续训练模型
以mnist数据集为例: bat训练脚本: Build\x64\Release\caffe.exe train --solver=examples/mnist/lenet_solver.prototx ...
- 广播小案例-监听系统网络状态 --Android开发
本例通过广播实现简单的监听系统网络状态改变的小案例. 1.案例效果演示 当手机连网后,系统提示“已连接网络”, 当手机断网后,系统提示“当前网络不可用”. 2.案例实现 在主活动中动态注册广播,然后写 ...
- caffe 动态库 Release X64
Release X64平台 createdll.h#ifndef CREARDLL_H_#define CREARDLL_H_ extern "C" _declspec(dllex ...