小程序上拉加载更多数据(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= ...
随机推荐
- 液晶流在齐次 Besov 空间中的正则性准则
在 [Zhang, Zujin. Regularity criteria for the three dimensional Ericksen–Leslie system in homogeneous ...
- Linux中安装C++编译器codeBlock,并配置opencv链接库
1.Linux中安装codeBlock https://blog.csdn.net/xinyunyishui/article/details/50967395 2.CodeBlock中的中文显示不完全 ...
- Vue项目中使用基于Vue.js的移动组件库cube-ui
cube-ui 是滴滴公司的技术团队基于 Vue.js 实现的精致移动端组件库.很赞,基本场景是够用了,感谢开源!感谢默默奉献的你们. 刚爬完坑,就来总结啦!!希望对需要的朋友有小小的帮助. (一)创 ...
- Tomcat zabbix监控、jmx监控、zabbix_java_gateway
几种方式监控tomcat,如标题. 下面就是参考的网上的连接.自己可以试一下. 由于牵扯到jvm的很多东西, 在这里就只是粘贴处连接参考. http://www.cnblogs.com/chrisDu ...
- Fork别人的代码 原作者更新后如何同步
给主题的fork加一个remote 给 fork 配置一个 remote 使用 git remote -v 查看远程状态 ➜ next git:(master) git remote -v origi ...
- webstorm允许移动端访问本地html页面的方法
- CEC和ARC介绍
众所周知,HDMI作为一个数字化视频音频的接收标准,是可以同时传输视频和音频的,当然随着HDMI版本的提升,它的功能也一直在增强.事实上 当HDMI升级到1.3时,人们就发现了HDMI多了一个CEC功 ...
- java 利用jsoup 爬取知乎首页问题
今天学了下java的爬虫,首先要下载jsoup的包,然后导入,导入过程:首先右击工程:Build Path ->configure Build Path,再点击Add External JARS ...
- 《剑指offer》第一个只出现一次的字符
本题来自<剑指offer> 反转链表 题目: 思路: C++ Code: Python Code: 总结:
- Sharding-JDBC
1.官网文档:https://shardingsphere.apache.org/document/legacy/3.x/document/cn/manual/sharding-jdbc/usage/ ...