微信小程序上拉加载更多

一般上拉加载更多用于数据太多,一次加载完成数据卡顿,差不多就是一个分页的功能,

写法很简单,首页data数据中先定义一个page为1,第一次进入页面调用接口将为1的page传给后台,随后在小程序自带的onReachBottom函数中操作

onReachBottom: function () {

var that = this;

console.log(that)

var page = that.data.page

page++;

that.setData({

page: page

})

// 显示加载图标

wx.showLoading({

title: ‘玩命加载中‘,

})

wx.request({

url: ‘‘,   //请求的接口地址

data: {

page: that.data.page,    //  页数

},

header: {

‘content-type‘: ‘application/json‘

},

method: ‘GET‘,

success: function (res) {

console.log(res)

var goods = that.data.grade.concat(res.data.data.list)     //grade  为一进入页面请求完数据定义的集合

if (res.data.data.list == ‘‘) {

console.log(1)

wx.showToast({

title: ‘暂无更多‘,

icon: ‘none‘,

})

} else {

that.setData({

grade : goods,

});

}

wx.hideLoading();

},

})

},

原文地址:https://www.cnblogs.com/lishuang2243/p/11142999.html

时间: 2024-10-04 08:57:04

微信小程序上拉加载更多的相关文章

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

前端经常遇到上拉加载更多的需求,一般还涉及到翻页.小程序里已经给了下拉到底的触发方法onReachBottom(),这里记录下怎样使用这个方法实现下拉加载更多,有需要的直接看代码,有详细注释: 1.首先在data里定义一下返回数据data,和翻页的页数pagenum data: { datalist: [], //.wxml文件需要绑定的列表,我这里用的数据类型是数组 pagenum: 1, //初始页默认值为1 }, 2.具体的请求过程,包含新老数据的数组合并,实现数据实时更新 getdata

微信小程序~上拉加载onReachBottom

代码: //页面上拉触底事件的处理函数 onReachBottom(e) { console.log("底部")// 滚动到页面执行 该 方法 wx.showToast({ title: '加载中...', icon: 'loading', duration: 2000 }) /* 这里执行你需要的请求数据追加到循环数组就好了 */ }, onPageScroll(e) { console.log(e) //滚动条 滚动的位置(e.scrollTop)从头部开始计算 }, 原理: 上拉

微信小程序上拉加载和下拉刷新(wepy)

这篇随笔主要是记录在用wepy写小程序下拉刷新和上拉加载功能时遇到的数据显示不完全的问题及解决方法. 网上很多关于小程序的上拉加载和下拉刷新的文章的实现方法,无非两种,一是用scroll-view组件,另一种则是使用onReachBottom()和onPullDownRefresh()两个页面事件处理函数. scroll-view实现不好的是不能使用onPullDownRefresh,只能检测滚动到顶部触发刷新或者其它动画操作,以及在其内部使用textarea.map.canvas.video等

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

微信小程序实现上拉加载下拉刷新 使用小程序默认提供方法. (1). 在xxx.json 中开启下拉刷新,需要设置backgroundColor,或者是backgroundTextStyle ,因为加载的动画可能会是白色背景,会看不清. { "usingComponents": { "annicate": "/components/annicate/index" }, "navigationBarTitleText": &quo

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

loadmore 加载更多(分页加载) 当用户打开一个页面时,假设后台数据量庞大时,一次性地返回所有数据给客户端,页面的打开速度就会有所下降,而且用户只看上面的内容而不需要看后面的内容时,也浪费用户流量,基于优化的角度来考虑,后台不要一次性返回所有数据,当用户有需要再往下翻的时候,再加载更加数据出来. 业务需求: 列表滚动到底部时,继续往上拉,加载更多内容 必备参数: (1)pageindex: 1 //第几次加载 (2)callbackcount: 15 //需要返回数据的个数 其他参数: 根

小程序上拉加载更多,onReachBottom

onReachBottom: function () { console.log(1) var that = this; var path = '/listsearch/'; var datalist=null; var url = app.globalData.http_base_url + path; // 显示加载图标 wx.showLoading({ title: '玩命加载中', }) app.globalData.currentPage ++; var _currentPage =

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

微信小程序下拉刷新上拉加载的两种实现方法 方法一:onPullDownRefresh和onReachBottom方法实现小程序下拉加载和上拉刷新 首先要在json文件里设置window属性             属性   类型                           描述 enablePullDownRefresh Boolean 是否开启下拉刷新,详见页面相关事件处理函数. 设置js里onPullDownRefresh和onReachBottom方法 属性    类型 描述 on

18.小程序上拉加载和下拉刷新

在微信小程序上实现下拉刷新.上拉加载的效果 使用系统提供的onPullDownRefresh.onReachBottom这2个事件, 前提需要在app.json或page.json配置文件中设置,才能使用. app.json是全应用的页面都可以使用该事件,page.json则只是对应的页面才可以使用. 示例: app.json: 在app.json文件里设置window属性 page.json: 在page.json文件里直接设置属性 示例: 结合导航栏loading显示正在加载的效果 Page

微信小程序实现滚动加载更多

1.需要用到的组件和api scroll-view(可滚动视图区域) wx.showToast(OBJECT)显示消息提示窗----显示loading小菊花用的 2.需要用到的属性 3.scrol-view需要指定一个高度,这个高度可以按自己的需求计算,我使用的是屏幕可用高度并且默认一页显示6个 4.滚动到底部绑定需要触发的事件 <scroll-view scroll-y='true' style="height:{{height}}px" bindscrolltolower='