微信小程序——页面事件,.启用下拉刷新监听页面的下拉刷新事件,上拉触底事件,停止下拉刷新的效果

这篇具有很好参考价值的文章主要介绍了微信小程序——页面事件,.启用下拉刷新监听页面的下拉刷新事件,上拉触底事件,停止下拉刷新的效果。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一.页面事件

1.什么是下拉刷新

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

2.启用下拉刷新

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

a.全局开启下拉刷新

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

b.局部开启下拉刷新

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

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

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

微信小程序下拉监听,微信小程序,微信小程序,小程序,前端,开发语言,Powered by 金山文档

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

微信小程序下拉监听,微信小程序,微信小程序,小程序,前端,开发语言,Powered by 金山文档

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

微信小程序下拉监听,微信小程序,微信小程序,小程序,前端,开发语言,Powered by 金山文档

5.停止下拉刷新的效果

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

微信小程序下拉监听,微信小程序,微信小程序,小程序,前端,开发语言,Powered by 金山文档

二.上拉触底事件

1.什么是上拉触底

上拉触底是移动端的专有名词,通过手指在屏幕上的上拉滑动操作,从而加载更多数据。

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

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

微信小程序下拉监听,微信小程序,微信小程序,小程序,前端,开发语言,Powered by 金山文档

3.配置上拉触底距离

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

可以在全局或页面的 json 配置文件中,通过 onReachBottomDistance 属性来配置上拉触底的距离。小程序默认的触底距离是50px,在实际开发中,可以根据自己的需求修改这个默认值。

三.上拉触底案例实践

  1. 案例效果展示

微信小程序下拉监听,微信小程序,微信小程序,小程序,前端,开发语言,Powered by 金山文档

2.案例实现步骤

1.定义获取随机颜色的方法

2.在页面加载时获取初始数据

3.渲染 UI 结构并美化页面效果

4.在上拉触底时调用获取随机颜色的方法

5.添加 loading 提示效果

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

3.步骤1—定义获取随机颜色的方法

微信小程序下拉监听,微信小程序,微信小程序,小程序,前端,开发语言,Powered by 金山文档

3.步骤2—渲染UI结构美化页面的效果

微信小程序下拉监听,微信小程序,微信小程序,小程序,前端,开发语言,Powered by 金山文档

3.步骤4—上拉触底时获取随机颜色

微信小程序下拉监听,微信小程序,微信小程序,小程序,前端,开发语言,Powered by 金山文档

3.步骤5-添加loading提示效果

微信小程序下拉监听,微信小程序,微信小程序,小程序,前端,开发语言,Powered by 金山文档

实现效果如下:

微信小程序下拉监听,微信小程序,微信小程序,小程序,前端,开发语言,Powered by 金山文档

3.步骤6—对上拉触底进行节流处理

①在 data 中定义 isloading 节流阀

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

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

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

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

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

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

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

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

4.自定义编译模式

过程:

微信小程序下拉监听,微信小程序,微信小程序,小程序,前端,开发语言,Powered by 金山文档

=========>文章来源地址https://www.toymoban.com/news/detail-823830.html

微信小程序下拉监听,微信小程序,微信小程序,小程序,前端,开发语言,Powered by 金山文档

到了这里,关于微信小程序——页面事件,.启用下拉刷新监听页面的下拉刷新事件,上拉触底事件,停止下拉刷新的效果的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【微信小程序】-—下拉刷新、上拉触底事件详细讲解

    下拉式移动端的专有名词,指的是通过手指子在屏幕上的下拉滑动操作,从而重新加载页面数据 (1)方法一:全局开启下拉刷新 在app.json的window节点中,将enablePullDownRefresh设置为true (2)方法二:局部开启下拉刷新 在页面的.json配置文件中,将enablePullDownRefresh设置为true 在实

    2024年02月06日
    浏览(48)
  • 微信小程序学习实录2(下拉刷新、下拉加载更多、小程序事件、PHP后端代码、刷新无数据解决方案)

    lazyCodeLoading基础库 2.11.1 及以上版本支持,2.11.1 以下兼容但无优化效果 通常情况下,在小程序启动期间,所有页面及自定义组件的代码都会进行注入,当前页面没有使用到的自定义组件和页面在注入后其实并没有被使用。自基础库版本 2.11.1 起,小程序支持有选择地注入必要

    2024年02月05日
    浏览(48)
  • 微信小程序的页面滚动事件监听

    微信小程序中可以通过 Page 的 onPageScroll 方法来监听页面滚动事件。具体步骤如下: 在页面的 onLoad 方法中注册页面滚动事件监听器: 在 onPageScroll 方法中处理页面滚动事件。onPageScroll 方法会在页面滚动时被调用,参数 event 包含了当前页面滚动的位置信息,例如 event.scrollT

    2024年02月07日
    浏览(46)
  • 微信小程序开发系列(三十二)·如何通过小程序的API实现页面的上拉加载(onReachBottom事件)和下拉刷新(onPullDownRefresh事件)

    目录 1.  上拉加载 2.  下拉刷新         上拉加载是小程序中常见的一种加载方式,当用户滑动页面到底部时,会自动加载更多的内容,以便用户继续浏览小程序中实现上拉加载的方式: ①  在app.json或者page.json中配置距离页面底部距离:onReachBottomDistance;默认50px。 ②

    2024年04月12日
    浏览(50)
  • 【微信小程序插件】下拉刷新、下拉加载

    今天在优化小程序的列表时候,想要把原生的 scroll-view 组件替换成一个下拉刷新的组件,然后就找了一下,果然有大神已经封装好。coolui-scroller 就是这样满足需求的一款插件,但是微信官网给出的描述以及安装引入的方式,会造成依赖安装失败,报错: 构建npm提示错误,未

    2024年02月08日
    浏览(83)
  • uniapp下拉刷新+数据缓存+自定义头部+事件监听注册

    pages.json 设置对应页面 enablePullDownRefresh 属性,激活下拉。 在 js 中定义 onPullDownRefresh 处理函数(和 onLoad 等生命周期函数同级),监听该页面用户下拉刷新事件。 需要在 pages.json 里,找到的当前页面的 pages 节点,并在style选项中开启 enablePullDownRefresh 当处理完数据刷新后,

    2024年02月02日
    浏览(41)
  • 微信小程序实现下拉刷新

    (1)把\\\"backgroundTextStyle\\\":“light\\\"改为\\\"backgroundTextStyle”:“dark” (2)添加\\\"enablePullDownRefresh\\\":true,开启下拉刷新。 1.在app.js中增加两个生命周期函数 1、首先在页面的json文件中添加设置:  “enablePullDownRefresh”: true  2、在js文件中写一个onRefresh()生命周期: 3、在onPullDownRefresh

    2024年02月13日
    浏览(43)
  • 【微信小程序】下拉刷新功能实现

    微信小程序开发系列 在开发微信小程序中经常会需要下拉页面进行更新要页面数据的功能,微信小程序提供了onPullDownRefresh函数。该函数作用是监听用户下拉动作。 监听用户下拉刷新事件。 需要在app.json的window选项中或页面配置中开启enablePullDownRefresh: 可以通过wx.startPullD

    2024年02月12日
    浏览(46)
  • 实现微信小程序下拉刷新功能

    方法一:全局设置下拉刷新功能      1、在app.json的\\\"window\\\"中进行配置         (1)把\\\"backgroundTextStyle\\\":“light\\\"改为\\\"backgroundTextStyle”:“dark”         (2)添加\\\"enablePullDownRefresh\\\":true,开启下拉刷新。       2、在app.js中增加两个生命周期函数   方法一:全局设置下拉刷新

    2024年02月13日
    浏览(43)
  • 微信小程序 上列表拉加载下拉刷新

      上拉加载和下拉刷新是小程序开发的常见需求。本文将介绍如何在微信小程序中实现上拉加载和下拉刷新的功能,为用户带来更加流畅、便捷的使用体验。 微信小程序 上列表拉加载下拉刷新 (1) 首先需要在使用到的 json 文件下配置 “enablePullDownRefresh”: true (2) 在 js 文件

    2024年01月16日
    浏览(51)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包