微信小程序页面事件 - 下拉刷新与上拉触底

一、下拉刷新

1.概念：下拉刷新是移动端的专有名词，指的是通过手指在屏幕上的下拉滑动操作，从而重新加载页面数据的行为。

2. 启用下拉刷新

启用下拉刷新有两种方式：

①全局开启下拉刷新

在 app.json 的 window 节点中，将 enablePullDownRefresh 设置为 true

②局部开启下拉刷新

在页面的 .json 配置文件中，将 enablePullDownRefresh 设置为 true

在实际开发中，推荐使用第 2 种方式，为需要的页面单独开启下拉刷新的效果。

3. 配置下拉刷新窗口的样式

在全局或页面的 .json 配置文件中，通过 backgroundColor 和 backgroundTextStyle 来配置下拉刷新窗口的样式，其中：

backgroundColor 用来配置下拉刷新窗口的背景颜色，仅支持16 进制的颜色值

backgroundTextStyle 用来配置下拉刷新 loading 的样式，仅支持 dark 和 light

4. 监听页面的下拉刷新事件

在页面的 .js 文件中，通过 onPullDownRefresh() 函数即可监听当前页面的下拉刷新事件。

例如，在页面的 wxml 中有如下的 UI 结构，点击按钮可以让 count 值自增 +1：

//页面结构
<view>count的值为:{{count}}</view>
<button bindtap="countAdd">+1</button>//在js文件中实现
Page({data:{count:0},countAdd(){this.setData({count: this.data.count +1})}
})

在触发页面的下拉刷新事件的时候，如果要把 count 的值重置为 0，示例代码如下：

 /*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {this.setData({count:0})},

5. 停止下拉刷新的效果

当处理完下拉刷新后，下拉刷新的 loading 效果会一直显示，不会主动消失，所以需要手动隐藏下拉刷新的 loading 效果。此时，调用 wx.stopPullDownRefresh() 可以停止当前页面的下拉刷新。示例代码如下：

  /*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {this.setData({count:0})// 调用wx.stopPullDownRefresh()实现停止下拉刷新wx.stopPullDownRefresh()},

二、上拉触底

1.概念：上拉触底是移动端的专有名词，通过手指在屏幕上的上拉滑动操作，从而加载更多数据的行为。

2. 监听页面的上拉触底事件

在页面的 .js 文件中，通过 onReachBottom() 函数即可监听当前页面的上拉触底事件。示例代码如下：

    /*** 页面上拉触底事件的处理函数*/onReachBottom: function () {console.log("上拉触底了");},

3. 配置上拉触底距离

上拉触底距离指的是触发上拉触底事件时，滚动条距离页面底部的距离。

可以在全局或页面的 .json 配置文件中，通过 onReachBottomDistance 属性来配置上拉触底的距离。

小程序默认的触底距离是 50px，在实际开发中，可以根据自己的需求修改这个默认值。

4.对上拉触底进行节流处理

① 在 data 中定义 isloading 节流阀

false 表示当前没有进行任何数据请求

true 表示当前正在进行数据请求

② 在 getColors() 方法中修改 isloading 节流阀的值

在刚调用 getColors 时将节流阀设置 true

在网络请求的 complete 回调函数中，将节流阀重置为 false

③ 在 onReachBottom 中判断节流阀的值，从而对数据请求进行节流控制

如果节流阀的值为 true，则阻止当前请求

如果节流阀的值为 false，则发起数据请求

示例代码：

Page({/*** 页面的初始数据*/data: {isLoading: false},getColors() {wx.request({url: 'https://www.escook.cn/categories',method: 'GET',success: () => {},complete: () => {this.setData({isLoading: false})}})},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {this.getColors()this.setData({isLoading: true})},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {if(this.data.isLoading) returnthis.getColors()},})

微信小程序页面事件 - 下拉刷新与上拉触底相关推荐

微信小程序---页面事件
1.下拉刷新(json文件中格式要严格,否则编译出错) 全局开启下拉刷新.不推荐在app.json的window节点中设置:"enablePullDownRefresh": tr ...
微信小程序 - 页面事件
上拉触底事件在页面的.js文件中,通过 onReachBottom()函数即可监听当前页面的上拉触底事件.示例代码如下: /** 页面上拉触底事件的处理函数*/onReachBottom() {c ...
微信小程序点击按钮弹出弹窗_微信小程序点击按钮弹出底部上拉菜单
小程序底部弹出菜单操作.gif html //index.wxml 弹出action sheet {{item.txt}} 取消提示:您选择了菜单{{menu}} js //index.js Pag ...
微信小程序页面栈的使用，修改上一个页面里的数据
如果我的文章有帮助到大家,请点个赞,谢谢啦正文开始! 第一个页面里 //wxss <input type="text" placeholder="请输入姓名&qu ...
微信小程序滚动Tab选项卡：左右滑动切换、触底加载分页
文章目录效果图一.顶部标签栏二.列表内容部分 swiper组件高度及上下滚动样式三.数据结构及赋值方法四.scroll组件触底事件(分页相关五.scroll组件的高度样式 swiper组件 ...
html下拉刷新原理,微信小程序下拉刷新及上拉加载原理解析
这篇文章主要介绍了微信小程序下拉刷新及上拉加载实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 1.下拉刷新的概念及应用场景. 概念: 下拉 ...
vant实现下拉刷新和上拉加载_微信小程序 - 实现下拉刷新、上拉加载
在小程序开发中使用下拉刷新和上拉加载非常多,比如常用的展示型首页,而实现这个功能有两种形式,第一种是使用 scroll-view 组件,第二种是不使用 scroll-view 组件而让整个页面刷新,那 ...
【微信小程序】实现小程序下拉刷新与上拉加载
微信小程序内置的上拉加载.下拉刷新与Android原生的有所不同,Android原生下拉刷新用SwipeRefreshLayout组件,重写onRefresh方法,而上拉加载则是使用RecycleVi ...
小程序：区域滚动、下拉刷新、上拉加载更多
一.简介开发环境:小程序.uniapp 实现功能:列表页面实现,区域滚动.下拉刷新.上拉加载更多,效果如图: 正常: 下拉刷新: 上拉加载: 二.实现 2.1.代码 <scroll-view ...

微信小程序页面事件 - 下拉刷新与上拉触底

微信小程序页面事件 - 下拉刷新与上拉触底相关推荐

最新文章

热门文章