<!--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)的更多相关文章

  1. 微信小程序 - 上拉加载更多组件

    详情用例看demo,点击下载示例:loadmore

  2. 微信小程序上拉加载:onReachBottom详解+设置触发距离

    前端经常遇到上拉加载更多的需求,一般还涉及到翻页.小程序里已经给了下拉到底的触发方法onReachBottom(),这里记录下怎样使用这个方法实现下拉加载更多,有需要的直接看代码,有详细注释: 1.首 ...

  3. 微信小程序~上拉加载onReachBottom

    代码: //页面上拉触底事件的处理函数 onReachBottom(e) { console.log("底部")// 滚动到页面执行 该 方法 wx.showToast({ tit ...

  4. h5 实现页面上拉加载更多数据

    您好,您的上拉加载更多的代码来喽: html:(style部分:html部分:js部分--js部分主要就是监控上拉,调接口) //上拉加载更多css <style> .wait-loadi ...

  5. 微信小程序上拉加载下拉刷新

    微信小程序实现上拉加载下拉刷新 使用小程序默认提供方法. (1). 在xxx.json 中开启下拉刷新,需要设置backgroundColor,或者是backgroundTextStyle ,因为加载 ...

  6. 微信小程序之上拉加载更多

    loadmore 加载更多(分页加载) 当用户打开一个页面时,假设后台数据量庞大时,一次性地返回所有数据给客户端,页面的打开速度就会有所下降,而且用户只看上面的内容而不需要看后面的内容时,也浪费用户流 ...

  7. 微信小程序 - 上拉加载

    demo.wxml  文件 <view wx:for="{{listdata}}" wx:key="listdata" class='listitem'& ...

  8. 微信小程序 - 上拉加载下拉刷新

    点击下载示例:小程序 - 上拉刷新下拉加载

  9. 微信小程序上拉加载——分页

    wxml: <view class="page"> <scroll-view class="imageViewCss_1" scroll-y= ...

随机推荐

  1. 运维工作笔记-------nginx的反向代理

    1.nginx的反向代理意义 一般来说,我们在项目中,不会直接让项目服务器ip与外网做直接映射,这样一则是不安全,二是客户直接去访问项目服务器,对项目服务器带来的压力太大,从而导致项目运行速度变慢,程 ...

  2. [Kubernetes]编排其实很简单

    什么是编排 Kubernetes中,我们总是在说一个概念:编排. 在[Kubernetes]谈谈Kubernetes的本质这篇文章中,关于"编排"的概念介绍了一下:过去很多集群管理 ...

  3. Ubuntu 终端关机和重启命令

    原文地址:https://blog.csdn.net/zzc15806/article/details/80907779 (diss一下原文地址的作者,你也是转载的为何不添加原文链接?) 重启命令:1 ...

  4. Beta 冲刺(4/7)

    目录 摘要 团队部分 个人部分 摘要 队名:小白吃 组长博客:hjj 作业博客:beta冲刺(4/7) 团队部分 后敬甲(组长) 过去两天完成了哪些任务 整理博客 ppt模板 接下来的计划 做好机动. ...

  5. 【easy】power of 2,3,4

    ==============================  2的幂次  ================================  最佳解法 如果一个数是2的次方数的话,根据上面分析,那么 ...

  6. CentOS 7 中 Systemd详解

    一.systemd的由来 Linux一直以来采用init进程但是init有两个缺点: 1.启动时间长.Init进程是串行启动,只有前一个进程启动完,才会启动下一个进程.(这也是CentOS5的主要特征 ...

  7. 最新版 IntelliJ IDEA2018.3.x 破解教程

    https://www.cnblogs.com/Candies/p/10050831.html

  8. install mysql on centos7

    MariaDB数据库管理系统是MySQL的一个分支,主要由开源社区在维护,采用GPL授权许可.开发这个分支的原因之一是:甲骨文公司收购了 MySQL后,有将MySQL闭源的潜在风险,因此社区采用分支的 ...

  9. net core体系-web应用程序-4asp.net core2.0 项目实战(1)-11项目日志解决方案

    本文目录1. Net下日志记录2. NLog的使用    2.1 添加nuget引用NLog.Web.AspNetCore    2.2 配置文件设置    2.3 依赖配置及调用    2.4 日志 ...

  10. 手动部署 kubernetes HA 集群

    前言 关于kubernetes HA集群部署的方式有很多种(这里的HA指的是master apiserver的高可用),比如通过keepalived vip漂移的方式.haproxy/nginx负载均 ...