上拉加载更多 ajax,小程序上拉加载更多数据(onReachBottom)

本文详细介绍了微信小程序中实现上拉加载更多功能的代码示例,包括onLoad、onReachBottom事件的处理,以及利用wx.request进行数据请求和列表更新的方法。同时,提到了在页面上拉触底时如何调用接口加载新数据,并展示了相关CSS和JS代码片段。此外,还讨论了分页加载对于提高用户体验的重要性。
摘要由CSDN通过智能技术生成

// 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

});

}

})

}

})

3ce2abd3b2707cf4299fe6afce402616.png

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

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

微信小程序~上拉加载onReachBottom

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

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

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

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

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

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

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

微信小程序 - 上拉加载

demo.wxml  文件

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

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

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

wxml:

微信小程序上滑加载更多

onReachBottom: function () { var that = this var limit = that.data.limit var count = that.data.count ...

随机推荐

&lowbar;&lowbar;weak与&lowbar;&lowbar;block区别,深层理解两者区别

准备工作 首先我定义了一个类 MyObject 继承 NSObject,并添加了一个属性 text,重写了description方法,返回 text 的值.这个主要是因为编译器本身对 NSString ...

数据库时间createtime字段 数据类型的选取

之前是一直在用datetime类型(db)精度到yyyy-MM-dd HH:mm:ss 或者 date类型 精度到 yyyy-MM-dd 用了框架自动注入功能,自己也没去深入没去管他的set赋值值等等 ...

(原&plus;转)ubuntu16中莫名死机及重新安装显卡驱动

转载请注明出处: http://www.cnblogs.com/darkknightzh/p/5992693.html 参考网址: http://blog.csdn.net/u012581999/ar ...

&lbrace;key&rcub;面向对象程序设计-C&plus;&plus; polymorphism 【第十三次上课笔记】

Peronal Link: http://segmentfault.com/a/1190000002464822 这节课讲了本门课程 面向对象程序设计中最为重要的一个部分 - 多态 /******** ...

Python 实现的下载op海贼王网的图片(网络爬虫)

没得事就爬一下我喜欢的海贼王上的图片 须要在d盘下建立一个imgcache目录 # -*- coding: utf-8 -*- import urllib import urllib2 import ...

编译gRPC

编译gRPC 目录 一.概述 二.编译gRPC 三.C#中使用gRPC 四.C++中使用gRPC 无论通过哪种语言调用gRPC,都必须要编译gRPC,因为生成proto访问类时,除了产生标准的数据定义 ...

达到J2EE在后台action控制接待javascript弹出的对话框

1.后台Action于: request.setAttribute("message", "这项username要么password错误,请重新输入!"); 2 ...

Java中的数值和集合

数组array和集合的区别: (1) 数值是大小固定的,同一数组只能存放一样的数据. (2) java集合可以存放不固定的一组数据 (3) 若程序事不知道究竟需要多少对象,需要在空间不足时自动扩增容量 ...

struts2之配置文件struts&period;xml详解

struts配置文件 struts.xml配置参数详解 struts.xml中很大一部分配置默认配置就好了 但是有些还是需要做了解  以便于理解 和修改 <?xml version=" ...

深入学习卷积神经网络(CNN)的原理知识

网上关于卷积神经网络的相关知识以及数不胜数,所以本文在学习了前人的博客和知乎,在别人博客的基础上整理的知识点,便于自己理解,以后复习也可以常看看,但是如果侵犯到哪位大神的权利,请联系小编,谢谢.好了下 ...

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值