<!--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. Mathematica 求出解后代入变量

    Solve[2 x - 3 == 0, x] x = x //. %[[1]]

  2. torch分类问题

    import torch from torch.autograd import Variable import torch.nn.functional as F import matplotlib.p ...

  3. Struts2优缺点

    优点: (1)  实现了MVC模式,层次结构清晰,使程序员只需关注业务逻辑的实现. (2)  丰富的标签库,大大提高了开发的效率. (3) Struts2提供丰富的拦截器实现. (4) 通过配置文件, ...

  4. ECMAScript 6中数组新方法

    数组的方法 数组的的大部分方法都可以实现数组的遍历. foreach方法 实现数组的遍历 const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]; arr.forEach(fu ...

  5. Jace Config

    一.jace配置 1.按照Jace 的默认IP配置自己电脑的IP网段(同一个网段),连接上之后使用默认的密码登录,导入tridiumEMEA…..的授权文件,之后创建Station,选择需要的协议驱动 ...

  6. python3 基础语法(二)

    一.python3的基本数据类型: 和其他语言一样都包含了以下数据类型: 类型 含义 实例 INT 整型(integer) 1 FLOAT 浮点型 1.1 BOOL 布尔值 TRUE/FALSE ST ...

  7. php 文件系统函数及目录函数

    1.basename ,dirname ,pathinfo和realpath basename(path) 返回路径中的文件名部份,包含扩展名,path表示路径: dirname(path) 返回路径 ...

  8. Java Spring Boot VS .NetCore (四)数据库操作 Spring Data JPA vs EFCore

    Java Spring Boot VS .NetCore (一)来一个简单的 Hello World Java Spring Boot VS .NetCore (二)实现一个过滤器Filter Jav ...

  9. nginx在后端服务维护时,自动挂公告页

    本想用lua玩一把,但我发现我的要求很简单,直接用upstream的weight和backup就OK了. 于是,这样玩了一把. 作个记录. 1).down 表示当前的server暂时不参与负载2).w ...

  10. Linux 查看负载内存

    负载   内存     1.作用 top命令用来显示执行中的程序进程,使用权限是所有用户. 2.格式 top [-] [d delay] [q] [c] [S] [s] [i] [n] 3.主要参数 ...