在小程序中,页面还有在一些专属的事件处理函数,如下

onPullDownRefresh()

监听用户下拉刷新事件

  • 需要在全局配置的 window 选项中或页面配置中开启 enablePullDownRefresh
  • 可以通过 Taro.startPullDownRefresh 触发下拉刷新,调用后触发下拉刷新动画,效果与用户手动下拉刷新一致。
  • 当处理完数据刷新后,Taro.stopPullDownRefresh 可以停止当前页面的下拉刷新

    onReachBottom()

    监听用户上拉触底事件

  • 可以在全局配置的 window 选项中或页面配置中设置触发距离 onReachBottomDistance

  • 在触发距离内滑动期间,本事件只会被触发一次

    onPageScroll(Object)

    监听用户滑动页面事件
    Object 参数说明:
参数 类型 说明
scrollTop Number 页面在垂直方向已滚动的距离(单位px)

注意:请只在需要的时候才在 page 中定义此方法,不要定义空方法。以减少不必要的事件派发对渲染层-逻辑层通信的影响。注意:请避免在 onPageScroll 中过于频繁的执行 this.setState() 等引起逻辑层-渲染层通信的操作。尤其是每次传输大量数据,会影响通信耗时。

onShareAppMessage(Object)

监听用户点击页面内转发按钮(Button 组件 openType=’share’)或右上角菜单“转发”按钮的行为,并自定义转发内容。
注意:只有定义了此事件处理函数,右上角菜单才会显示“转发”按钮
Object 参数说明:

参数 类型 说明
from String 转发事件来源。
button:页面内转发按钮;
menu:右上角转发菜单
target Object 如果 from 值是 button,则 target 是触发这次转发事件的 button,否则为 undefined
webViewUrl String 页面中包含 组件时,返回当前 的url

此事件需要 return 一个 Object,用于自定义转发内容,返回内容如下:
自定义转发内容

字段 类型 说明
title 转发标题 当前小程序名称
path 转发路径 当前页面 path ,必须是以 / 开头的完整路径
imageUrl 自定义图片路径,可以是本地文件路径、代码包文件路径或者网络图片路径。支持 PNG 及 JPG 。显示图片长宽比是 5:4 使用默认截图

示例代码

  1. export default class Index extends Component {
  2. config = {
  3. navigationBarTitleText: '首页'
  4. }
  5. onShareAppMessage (res) {
  6. if (res.from === 'button') {
  7. // 来自页面内转发按钮
  8. console.log(res.target)
  9. }
  10. return {
  11. title: '自定义转发标题',
  12. path: '/page/user?id=123'
  13. }
  14. }
  15. render () {
  16. return (
  17. <View className='index'>
  18. <Text>1</Text>
  19. </View>
  20. )
  21. }
  22. }

onResize(object)

只有微信小程序支持 基础库 2.4.0 开始支持

小程序屏幕旋转时触发。详见 响应显示区域变化

onTabItemTap(Object)

微信小程序中,基础库 1.9.0 开始支持

点击 tab 时触发
Object 参数说明:

参数 类型 说明
index String 被点击 tabItem 的序号,从 0 开始
pagePath String 被点击 tabItem 的页面路径
text String 被点击 tabItem 的按钮文字

componentWillPreload()

目前只有微信小程序支持

预加载钩子

onTitleClick()

只有支付宝小程序支持,基础库 1.3.0 开始支持

点击标题触发

onOptionMenuClick()

只有支付宝小程序支持,基础库 1.3.0 开始支持

点击导航栏额外图标触发

onPopMenuClick()

只有支付宝小程序支持,基础库 1.11.0 开始支持

暂无说明

onPullIntercept()

只有支付宝小程序支持,基础库 1.3.0 开始支持

下拉截断时触发

H5 暂时没有同步实现 onReachBottomonPageScroll 这两个事件函数,可以通过给 window 绑定 scroll 事件来进行模拟,而 onPullDownRefresh 下拉刷新则暂时只能用 ScrollView 组件来代替了。

页面事件函数各端支持程度如下

方法 作用 微信小程序 百度小程序 字节跳动小程序 支付宝小程序 H5 RN
onPullDownRefresh 页面相关事件处理函数—监听用户下拉动作 ✔️ ✔️ ✔️ ✔️
onReachBottom 页面上拉触底事件的处理函数 ✔️ ✔️ ✔️ ✔️
onShareAppMessage 用户点击右上角转发 ✔️ ✔️ ✔️ ✔️
onPageScroll 页面滚动触发事件的处理函数 ✔️ ✔️ ✔️ ✔️
onTabItemTap 当前是 tab 页时,点击 tab 时触发 ✔️ ✔️ ✔️ ✔️
onResize 页面尺寸改变时触发,详见 响应显示区域变化 ✔️
componentWillPreload 预加载 ✔️
onTitleClick 点击标题触发 ✔️
onOptionMenuClick 点击导航栏额外图标触发 ✔️(基础库 1.3.0)
onPopMenuClick ✔️(基础库 1.3.0)
onPullIntercept 下拉截断时触发 ✔️(基础库 1.11.0)

以上成员方法在 Taro 的页面中同样可以使用,书写同名方法即可,不过需要注意的,目前暂时只有小程序端支持(支持程度如上)这些方法,编译到 H5/RN 端后这些方法均会失效。