小程序上拉加载更多数据(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= ...
随机推荐
- .net core 添加 Swagger
1.新建一个Core项目 添加nuget包:Swashbuckle.AspNetCore 添加Startup文件: 先引用: using Swashbuckle.AspNetCore.Swagger; ...
- vue父子组件之间互相获取data值&调用方法(非props)
vue 子组件调用父组件方法&数据 vue有$parent这么一个属性,在子组件中就能拿到父组件的数据 this.$parent.xxx 就能调用父组件的方法 this.$parent.xxx ...
- tmux 后台训练
参考链接:https://blog.csdn.net/u014381600/article/details/54588531
- html(jQuery)替换字符串(全部替换)
var str= "a<br/>b<br/>c<br/>"; var Newstr = str.replace("<br/&g ...
- [JavaScript]ECMA-6 yield语法
概述 yield关键字用于并且仅限于生成器函数(generator)内部,作用是暂停(并返回)/重启(可选修改该栈环境变量)该函数栈环境. 一般语法 调用生成器函数时返回一个可迭代对象,当调用该对象的 ...
- Cookie 判断页面是否为第一次打开 包括刷新
$.cookie = function(e, t, n) { if(arguments.length > 1 && (!/Object/.test(Object.prototyp ...
- python第10天(下)
https://www.cnblogs.com/zingp/p/6863170.html 一:IO模型介绍 IO发生时涉及的对象和步骤 对于一个网络IO(network IO),它会涉及到两个系统对 ...
- 代码生成工具更新--快速生成Winform框架的界面项目
在之前版本的代码生成工具Database2Sharp中,由于代码生成都是考虑Winform和Web通用的目的,因此Winform界面或者Web界面都是单独生成的,在工具中生成相应的界面后,复制到项目里 ...
- numpy的索引-【老鱼学numpy】
简单的索引值 import numpy as np a = np.arange(3, 15).reshape(3, 4) print("a=") print(a) print(&q ...
- logrotate命令
logrotate是个十分有用的工具,它可以自动对日志进行截断(或轮循).压缩以及删除旧的日志文件,例如,你可以设置logrotate,让/var/log/foo日志文件每30天轮循,并删除超过6个月 ...