微信小程序实现下拉刷新和上拉触底，获取新数据

一、启用下拉刷新（两种方式）
1、全局下拉刷新
在app.json的window节点中，将enablePullDownRefresh设置为true
2、局部下拉刷新
在页面的json文件中，将enablePullDownRefresh设置为true
二、配置下拉刷新
在全局或页面的.json文件中，通过backgroundColor和backgroundTextStyle来配置下拉刷新窗口的样式，其中：
backgroundColor：用来配置下拉刷新窗口的背景颜色，仅支持16进制的颜色值
backgroundTextStyle：用来配置下拉刷新loading的样式，仅支持dark和light两个颜色属性
如图在页面的json文件进行的配置：

三、下拉刷新
1、在data中定义存放列表的属性，用来接收获取的数据

data: {goodsList:[], // 商品列表数组// 请求参数对象queryObj:{pagenum: 1,// 页码值pagesize: 10 // 每页显示多少条数据},// 总数量，用来实现分页total: 0},

2、将页面跳转时携带的参数，转存到 queryObj 对象中：

  /*** 生命周期函数--监听页面加载*/onLoad: function (options) {// 调用获取商品列表数据的方法this.getGoodsList()},

3、定义获取商品列表数据

//获取商品列表数据方法
getGoodsList(isPull) {wx.showLoading({title: '数据加载中...',})wx.request({url: `https://www.dd.cn/${this.data.queryObj}`,method:'GET',success:({data:res})=>{console.log(res);// 只要数据请求完毕，就立即按需调用 isPull回调函数isPull && isPull()this.setData({goodsList:[...this.data.goodsList, ...res.data],total:res.tolal})},// 无论获取数据是否成功都会执行该方法complete:()=>{wx.hideLoading() // 关闭loading}})},

3、在页面循环数据，展示到页面（此处代码省略）
4、下拉刷新事件

 /*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {// 1. 重置关键数据let pagenum = 'queryObj.pagenum'this.setData({[pagenum]:1,total :0,isloading : false,goodsList : []})// 2. 重新发起请求 并关闭下拉窗口this.getGoodsList(() => wx.stopPullDownRefresh())},

四、上拉触底事件
1、首先需要配置json文件，“onReachBottomDistance”: 150
2、在onReachBottom上拉触底事件中处理

 /*** 页面上拉触底事件的处理函数*/onReachBottom: function () {if(this.data.isLoading) return  //判断是否为true let pagenum = 'queryObj.pagenum'this.setData({pagenum:pagenum += 1// 让页码值自增 +1})this.getGoodsList()// 重新获取列表数据},

3、通过节流阀防止发起额外的请求
3.1在 data 中添加 isloading 节流阀如下：

  data: {// 是否正在请求数据isloading: false
}

3.2修改 getGoodsList 方法，在请求数据前后，分别打开和关闭节流阀：

// ** 打开节流阀
getGoodsList() {this.setData({isLoading:true})// 省略中间代码，和前面一致wx.request({//...省略代码，和前面 3、定义获取商品列表数据 代码不变// 无论获取数据是否成功都会执行该方法complete:()=>{wx.hideLoading() // 关闭loadingthis.setData({isLoading:false})}})
}

3.3 判断数据是否加载完毕，避免不必要的请求
如果下面的公式成立，则证明没有下一页数据了：

当前的页码值 * 每页显示多少条数据 >= 总数条数
pagenum * pagesize >= total

 onReachBottom: function () {// 判断是否还有下一页数据if (this.queryObj.pagenum * this.queryObj.pagesize >= this.total) {wx.showLoading({title: '数据加载完毕！',})wx.hideLoading() // 关闭loadingreturn }}

上拉触底完整代码如下

data: {goodsList:[], // 商品列表数组// 请求参数对象queryObj:{query: '',   // 查询关键词cid: '',   // 商品分类Idpagenum: 1,// 页码值pagesize: 10 // 每页显示多少条数据},// 总数量，用来实现分页total: 0,// 是否正在请求数据isloading: false
},
//获取商品列表数据方法
getGoodsList() {this.setData({isLoading:true})wx.showLoading({title: '数据加载中...',})wx.request({url: `https://www.dd.cn/${this.data.queryObj}`,method:'GET',success:({data:res})=>{console.log(res);this.setData({goodsList:[...this.data.goodsList, ...res.data],total:res.tolal})},// 无论获取数据是否成功都会执行该方法complete:()=>{wx.hideLoading() // 关闭loadingthis.setData({isLoading:false})}})},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {// 判断是否还有下一页数据if (this.queryObj.pagenum * this.queryObj.pagesize >= this.total) {wx.showLoading({title: '数据加载完毕！',})wx.hideLoading() // 关闭loadingreturn }// 判断是否正在请求其它数据，如果是，则不发起额外的请求if(this.data.isLoading) return let pagenum = 'queryObj.pagenum'this.setData({[pagenum]:pagenum += 1// 让页码值自增 +1})this.getGoodsList()// 重新获取列表数据},

微信小程序实现下拉刷新和上拉触底，获取新数据相关推荐

微信小程序下拉刷新和上拉加载
效果图微信小程序实现下拉刷新和上拉加载有2中方法 1 用系统自带的个人感觉特别简单 2 使用scroll-view 实现, scroll-view 里面有2个属性是滑动到顶部以及到底部如下其实 ...
vant实现下拉刷新和上拉加载_微信小程序 - 实现下拉刷新、上拉加载
在小程序开发中使用下拉刷新和上拉加载非常多,比如常用的展示型首页,而实现这个功能有两种形式,第一种是使用 scroll-view 组件,第二种是不使用 scroll-view 组件而让整个页面刷新,那 ...
入门微信小程序(含实战) [第九篇] -- 下拉刷新和上拉加载
下拉刷新和上拉加载是两个独立又密切联系的功能,上拉加载需要服务器端有分页机制,而下拉刷新除了重新获取信息外还要对之前的状态和页码进行初始化. 一个一个来吧. 服务器端分页其实yii2早就已经为我们准 ...
微信小程序实现下拉刷新
微信小程序实现下拉刷新配置json文件在js文件中写下拉刷新方法注意配置json文件如果需要全局使用下拉刷新就在app.json中设置如果为单页面使用则在页面json设置即可 " ...
微信小程序开发工具将已存在的Git项目在新开发者下拉取推送
微信小程序开发工具将已存在的Git项目在新开发者下拉取推送前言流程完事前言最近有同事离职了,交接了一个微信小程序的项目下来,源码放在了公司内部的GIT上面,当我下载下来维护之后发现,在微信 ...
vue uniapp 微信小程序搜索下拉框模糊搜索
vue uniapp 微信小程序搜索下拉框模糊搜索话不多说直接贴代码 template <template><view class="index"> ...
php 类似微信下拉菜单,微信小程序模拟下拉菜单开发实例
本文主要和大家分享微信小程序模拟下拉菜单开发实例,希望能帮助到大家. 一.知识点 1.实现动态显示和隐藏某个控件列表1data:{ open:false }, showitem:function() ...
微信小程序 select 下拉框组件
一.源码地址 GitHub - imxiaoer/WeChatMiniSelect: 微信小程序 select 下拉框组件二.效果图录屏图片质量较差,所以大家会看到残影(捂脸) 三.组件源码 1. ...
【好程序员笔记分享】——下拉刷新和上拉加载更多
-iOS培训,iOS学习-------型技术博客.期待与您交流!------------ iOS学习之路--下拉刷新和上拉加载更多简介本文中笔者将和大家分享应用app中常用到的表单内容的下拉刷新和 ...
微信小程序scroll-view实现自定义刷新
微信小程序scroll-view实现自定义刷新@TOC 先说原生页面级的刷新通常我们可以利用微信小程序的onPullDownRefresh函数(下拉刷新监听函数)和onReachBottom函数(上 ...

微信小程序实现下拉刷新和上拉触底，获取新数据

微信小程序实现下拉刷新和上拉触底，获取新数据相关推荐

最新文章

热门文章