小程序上拉加载更多数据(onReachBottom)
<!--pages/test/test.wxml-->
<block wx:for="{{list}}" wx:key="item.id">
<image src="{{item.titlepic}}"></image>
</block>
// pages/test/test.js
Page({
data: {
curpage: 1,
list: null
},
onLoad: function() {
wx.showLoading();
var _this = this;
/**初始化list*/
_this.getAjaxList()
},
/**上拉动作, push数据*/
onReachBottom: function() {
console.log(++this.data.curpage);
this.getAjaxList();
},
getAjaxList: function() {
wx.showLoading({
mask: true //显示触摸蒙层 防止事件穿透触发
});
var _this = this;
wx.request({
url: 'https://huyahaha.com/video/listajax',
data: {
page: _this.data.curpage
},
header: {
'content-type': 'application/json'
},
success: function(res) {
wx.hideLoading()
console.log(res.data.data.data);
var data1 = _this.data.list;
if (data1 == null) {
_this.setData({
list: res.data.data.data
});
return;
}
for (var i = 0; i < res.data.data.data.length; i++) {
data1.push(res.data.data.data[i]);
}
_this.setData({
list: data1
});
}
})
} })

更多链接:https://www.cnblogs.com/xxflz/p/9309681.html
小程序上拉加载更多数据(onReachBottom)的更多相关文章
- 微信小程序 - 上拉加载更多组件
详情用例看demo,点击下载示例:loadmore
- 微信小程序上拉加载:onReachBottom详解+设置触发距离
前端经常遇到上拉加载更多的需求,一般还涉及到翻页.小程序里已经给了下拉到底的触发方法onReachBottom(),这里记录下怎样使用这个方法实现下拉加载更多,有需要的直接看代码,有详细注释: 1.首 ...
- 微信小程序~上拉加载onReachBottom
代码: //页面上拉触底事件的处理函数 onReachBottom(e) { console.log("底部")// 滚动到页面执行 该 方法 wx.showToast({ tit ...
- h5 实现页面上拉加载更多数据
您好,您的上拉加载更多的代码来喽: html:(style部分:html部分:js部分--js部分主要就是监控上拉,调接口) //上拉加载更多css <style> .wait-loadi ...
- 微信小程序上拉加载下拉刷新
微信小程序实现上拉加载下拉刷新 使用小程序默认提供方法. (1). 在xxx.json 中开启下拉刷新,需要设置backgroundColor,或者是backgroundTextStyle ,因为加载 ...
- 微信小程序之上拉加载更多
loadmore 加载更多(分页加载) 当用户打开一个页面时,假设后台数据量庞大时,一次性地返回所有数据给客户端,页面的打开速度就会有所下降,而且用户只看上面的内容而不需要看后面的内容时,也浪费用户流 ...
- 微信小程序 - 上拉加载
demo.wxml 文件 <view wx:for="{{listdata}}" wx:key="listdata" class='listitem'& ...
- 微信小程序 - 上拉加载下拉刷新
点击下载示例:小程序 - 上拉刷新下拉加载
- 微信小程序上拉加载——分页
wxml: <view class="page"> <scroll-view class="imageViewCss_1" scroll-y= ...
随机推荐
- 工作经验-类型转换[ java.lang.String]
错误代码: logger.info("1"); Map<String,String> zxmap = (Map) zxList.get(0); ybty.setFyze ...
- perl 之 正则表达式 (简)
正则表达式,简单介绍: 元字符 匹配项 字符类:单字符与数字 . 匹配除换行符之外的任意字符 [a-z0-9] 匹配集中任意单字符 [^a-z0-9] 匹配不在集合中的任意单字符 \d 匹配单个数 ...
- html5 - 地图
demo截图: demo链接 代码: <!DOCTYPE html> <html lang="en"> <head> <meta char ...
- 007_wireshark分析TCP的三次握手和四次断开
要想进行抓包分析,必须先了解TCP的原理.这里介绍了TCP的建立连接的三次握手和断开连接的四次握手. 一.前言:介绍三次握手之前,先介绍TCP层的几个FLAGS字段,这个字段有如下的几种标示 SYN表 ...
- 根据ip获取对应的省市区
public static String getAddressByIp(String ip) { String resout = ""; try { if (isInner(ip) ...
- EurekaClient项目启动报错Invocation of destroy method failed on bean with name 'scopedTarget.eurekaClient': org.springframework.beans.factory.BeanCreationNotAllowedException: Error creating bean with name 'e
Disconnected from the target VM, address: '127.0.0.1:51233', transport: 'socket' Eureka Client的使用 使用 ...
- Cordova IOT Lesson003
bot index.html <!DOCTYPE html> <html> <head> <title>Arduino蓝牙机械昆虫控制器</tit ...
- 平衡树简单教程及模板(splay, 替罪羊树, 非旋treap)
原文链接https://www.cnblogs.com/zhouzhendong/p/Balanced-Binary-Tree.html 注意是简单教程,不是入门教程. splay 1. 旋转: 假设 ...
- linux添加新磁盘
先fdisk -l 看一下有哪些没有挂载的盘符. 然后将创建的文件夹与待挂载的盘符绑定,即:mount /dev/vdc /data
- 虚拟机Oracle VM VirtualBox linux系统如何访问windows共享文件夹
1. 在本机系统设置一个共享文件夹,用于与Ubuntu交互的区域空间. 2.右击状态栏上共享文件夹图标或菜单栏“设备-共享文件夹”,打开共享文件夹设置,如图示 3.点击共享文件夹设置框,右 ...