微信小程序下拉刷新上拉触底分页

下拉刷新

1、在需要下拉刷新页面的json配置页，设置"enablePullDownRefresh":true，默认为false

2、在* 页面相关事件处理函数--监听用户下拉动作 * onPullDownRefresh() 中添加要刷新的内容。

上拉触底

1、在*页面上拉触底事件的处理函数* async onReachBottom() 中添加要触底刷新的内容

2、做分页显示时，需要在函数中添加判断是否为最后一页数据，否则小程序会自动随机读取。

以下为实例代码：

  /*** 页面的初始数据*/data: {   page:0,//表示第一页totalCount:0,//数据条数pageSizes:5,//每页显示5条记录haveData:true,//数据库中存在记录},//获取数据库记录数getTotalCount(){return new Promise((resolve,reject)=>{db.collection('cloudOrder').count().then(res=>{      this.setData({totalCount:res.total})resolve({status:'ok'})}).catch(e=>{reject({status:e})})})    },
//获取订单列表getOrderList(){return new Promise((resolve,reject)=>{        const {orderAll,page,pageSizes,totalCount} = this.data;//如果为最后一页，则返回if(orderAll.length>=totalCount){this.setData({haveData:false})return;}wx.showLoading({title: '加载中',}) //调用云函数读取多表联合查询的内容wx.cloud.callFunction({name:"myfunctions",data:{type:"getOrder",page,pageSizes}}).then(res=>{wx.hideLoading();      if(res.result.status == "success"){const {orderAll} = this.data;        const newOrderArray = res.result.msg.list//返回的数组数据this.setData({orderAll:orderAll.concat(newOrderArray)})     resolve({status:'ok'})  }}).catch(err=>{wx.hideLoading();reject(err)})})},/*** 生命周期函数--监听页面加载*/async onLoad(options) {//获取记录数await this.getTotalCount();//console.log(this.data.totalCount)await this.getOrderList();//读取初始化数据},/*** 页面相关事件处理函数--监听用户下拉动作*/async onPullDownRefresh() {wx.showLoading()this.data.page = 0await this.getOrderList();//获取订单wx.hideLoading()wx.stopPullDownRefresh() //下拉刷新处理完毕后，要用wx.stopPullDownRefresh()来关闭},/*** 页面上拉触底事件的处理函数*/async onReachBottom() {this.data.page += 1console.log(this.data.page)await this.getOrderList();},

微信小程序下拉刷新上拉触底分页相关推荐

微信小程序开发之scroll-view上拉加载数据实现
微信小程序开发之scroll-view上拉加载数据实现一.开发思路 1.使用小程序的scroll-view组件中提供了一个bindscrolltolower属性监听组件的滑动到了底部 https:/ ...
微信小程序开发使用onreachBottom实现页面触底加载及分页
目录一简要介绍一下onreachBottom事件二实例展示三遇到的一些问题一简要介绍一下onreachBottom事件 onreachBottom和onLoad以及onShow一样, ...
【微信小程序】-- 页面事件 - 上拉触底 - 案例（二十七）
【微信小程序】-- 页面事件 - 上拉触底（二十六）
php微信小程序向下滑动,微信小程序功能实现：上滑加载下拉刷新
本篇文章给大家带来的内容是关于微信小程序功能实现:上滑加载下拉刷新,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 之前谈到文章列表的数据加载,是一次性全部加载,这样是不友好的.这章介 ...
html下拉刷新原理,微信小程序下拉刷新及上拉加载原理解析
这篇文章主要介绍了微信小程序下拉刷新及上拉加载实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 1.下拉刷新的概念及应用场景. 概念: 下拉 ...
微信小程序下拉刷新/上拉加载组件
简介一款基于官方组件scroll-view进行封装的支持上拉加载下拉刷新的微信小程序组件,需要基础库2.10.1及以上, 项目地址:github 预览功能下拉刷新上拉加载支持自定义下拉样式 ...
小程序下拉刷新上拉加载等多
小程序下拉刷新上拉加载下拉刷新在当前页面的json文件中开启上拉刷新 async getGoodsList(){ //定义参数信息var n=this.data.infoconst res=aw ...
微信小程序下拉刷新问题
微信小程序下拉刷新问题我们主要来说一下微信小程序的下拉刷新问题,这个问题也是我自己碰见的问题,问题比较二,但是又很恶心,所以在这里给大家分享一下,有这个问题朋友,赶紧从死胡 ...
微信小程序--下拉刷新
实现微信小程序下拉刷新步骤一 json文件配置(若需要全局配置,则在app.json 反正就配置本界面得到json即可) {"enablePullDownRefresh": tr ...

微信小程序下拉刷新上拉触底分页

微信小程序下拉刷新上拉触底分页相关推荐

最新文章

热门文章

微信小程序 下拉刷新 上拉触底分页

微信小程序 下拉刷新 上拉触底分页相关推荐

最新文章

热门文章

微信小程序下拉刷新上拉触底分页

微信小程序下拉刷新上拉触底分页相关推荐