在日常项目开发中，前端工程师会不可避免的接触到微信小程序的开发，在开发时会遇到下拉刷新、上拉加载的问题。就让我们直接步入正题吧。

关于下拉刷新

一、在json文件中启用下拉事件

1.放在app.json文件中，注意这里写入是小程序所有页面启用下拉事件，一般情况下不会所有页面都启用；

2.放在单独页面对应的 .json文件中，此时只有单页面触发下拉事件。

"enablePullDownRefresh": true,"backgroundTextStyle": "dark"

其中 backgroundTextStyle 是用来配置下拉刷新loading的样式，仅支持dark和light两个颜色属性

然后进入到我们的js文件中

二、在js文件中使用 onPullDownRefresh 方法

onPullDownRefresh: function () {this.setData({list: [],})wx.showNavigationBarLoading()// 定义下拉事件触发时，弹出的提示框wx.showToast({title: 'loading....',icon: 'loading',duration: 500});// 这里做了个延时功能，可不写setTimeout(() => {wx.hideNavigationBarLoading()  // 隐藏导航条加载动画wx.stopPullDownRefresh()       // 停止当前页面下拉刷新// 这里进行 接口方法的调用this.list();}, 500);},

###### 下拉刷新到这里就结束了。

关于上拉触底

一、在js中我们需要先定义好基础参数。

Page({/*** 页面的初始数据*/data: {page: 1,   // 页码size: 10,  // 每页数据数total: 0,  // 数据总数},//  这里为请求接口方法，请自定义 getList(){}
})

二、进入 onReachBottom 上拉触底这个API方法

让我们直接进入代码吧

onReachBottom: function () {var p = this.data.page;var s = this.data.size;var t = this.data.titol;// 当页码数乘每页数据量小于总数量时，页码数+1，同时再次请求接口请求新的数据if (p * s < t) {p=p+1;this.setData({page:p})this.getList();  //自己需要重新加载的}else{// 这里直接给出提示就好了wx.showToast({title: '暂无更多数据啦',icon: 'none',duration: 2000});}
}}

###### 上拉触底到这里就结束了，希望有用哦

关于微信小程序下拉刷新、上拉触底方法的实现相关推荐

微信小程序开发之scroll-view上拉加载数据实现
微信小程序开发之scroll-view上拉加载数据实现一.开发思路 1.使用小程序的scroll-view组件中提供了一个bindscrolltolower属性监听组件的滑动到了底部 https:/ ...
微信小程序实现分页加载，触底加载下一页，滚动加载
这里我就不写wxml了,就是一个列表循环,直接看js代码逻辑,注释都写在代码后面了,这个方法可以实现无限滚动加载,直到加载完最后一条数据,也可以实现触底没数据后,二次触底可以从新加载刷新,学废了就给个 ...
微信小程序开发使用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 ...
微信小程序下拉刷新问题
微信小程序下拉刷新问题我们主要来说一下微信小程序的下拉刷新问题,这个问题也是我自己碰见的问题,问题比较二,但是又很恶心,所以在这里给大家分享一下,有这个问题朋友,赶紧从死胡 ...

关于微信小程序下拉刷新、上拉触底方法的实现