附录3-小程序常用事件

目录

[1 点击事件 tap](#1 点击事件 tap)

[2 文本框输入事件 input](#2 文本框输入事件 input)

[3 状态改变事件 change](#3 状态改变事件 change)

[4 下拉刷新事件 onPullDownRefresh()](#4 下拉刷新事件 onPullDownRefresh())

[5 上拉触底事件 onReachBottom()](#5 上拉触底事件 onReachBottom())


1 点击事件 tap

2 文本框输入事件 input

可以使用 e.detail.value 打印出当前文本框的值

我现在在文本框中依次输入12345,在console中会打印出当前的值

一般我们会给一个data专门存储文本框的内容,方便接下来调用

刷新后是这样的

数据与文本框双向绑定

  • 双向绑定是因为有value,如果没有value那就是单向绑定

3 状态改变事件 change

小程序中change可以在组件swiper中使用

  • checkbox是没有change事件的

轮播图切换的时候会触发change事件,可以使用e.detail.current.id获得当前轮播图的索引

4 下拉刷新事件 onPullDownRefresh()

首先你需要在页面(或全局)中启用下拉刷新,下拉刷新一般只在页面中配置

配置之后进行编译,然后向下拽页面,就会有这种效果

  • 详细的配置效果可以看 10.全局配置 app.json与页面配置

在页面的JS文件中有一个 onPullDownRefresh(),我们在里面写上想执行的内容就行了

在 真机 上下拉的效果不会自动关闭,我们需要在onPullDownRefresh()的最后加上wx.stopPullDownRefresh()实现完成动作后关闭效果

  • wx.stopPullDownRefresh()括号中可以写一个回调函数

5 上拉触底事件 onReachBottom()

上拉触底就是你逛 电商APP 的时候,你向下拉商品的时候,发现下面总是有商品,你拉到一定程度的时候就会给你自动加载一批新的

每个页面默认都有上拉触底功能,为了体现上拉触底,我们首先给page一个很高的高度

  • 当页面可以上拉的时候才有上拉触底功能,如果你页面上拉不了(一页能显示所有东西)那么是触发不了上拉触底的

然后在 onReachBottom() 中写上一些内容

当进度条距离最后还有一段距离的时候,就会触发上拉触底

  • 上拉触底的距离可以自己设置(onReachBottomDistance),默认为50px,设置方法可以看一下 10.全局配置 app.json 与页面配置

默认情况下,你反复在底部拖动进度条,下拉触底会反复触发

所以你的下拉处理的内容要做节流的处理,节流可以看一下这个 https://blog.csdn.net/potato123232/article/details/130108489

相关推荐
低代码布道师3 小时前
少儿舞蹈小程序(7)打造您的“活”名片:动态展示机构实力
低代码·小程序
程序员陆通7 小时前
用 Cursor AI 快速开发你的第一个编程小程序
人工智能·小程序
鹧鸪云光伏与储能软件开发7 小时前
投资储能项目能赚多少钱?小程序帮你测算
运维·数据库·小程序·光伏·光伏设计软件·光伏设计
微三云-轩7 小时前
小程序:12亿用户的入口,企业数字化的先锋军
大数据·小程序·开源软件
低代码布道师7 小时前
少儿舞蹈小程序(8)校区信息后台搭建
低代码·小程序
2501_916008898 小时前
iOS 抓包工具有哪些?全面盘点主流工具与功能对比分析
android·ios·小程序·https·uni-app·iphone·webview
2501_915921438 小时前
iOS混淆工具实战 视频流媒体类 App 的版权与播放安全保护
android·ios·小程序·https·uni-app·iphone·webview
—Qeyser11 小时前
好看的背景颜色 uniapp+小程序
小程序·uni-app·uniapp·微信小游戏
2501_9160088911 小时前
uni-app iOS 日志与崩溃分析全流程 多工具协作的实战指南
android·ios·小程序·https·uni-app·iphone·webview
Dark_programmer11 小时前
钉钉小程序 - - - - - 小程序内打开OA文档链接
小程序·钉钉