查看更多资讯中心

页面事件与组件事件的处理函数2019-02-10 11:17 天津网站建设网

内容摘要:页面事件处理函数 onPullDownRefresh() 监听用户下拉刷新事件。 需要在 app.json 的 window 选项中或 页 面配置 中开启 enablePullDownRefresh 。 可以通过 wx.startPullDownRefresh 触发下拉刷新,调用后触...

页面事件处理函数

onPullDownRefresh()

监听用户下拉刷新事件。

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

onReachBottom()

监听用户上拉触底事件。

  • 可以在app.jsonwindow选项中或面配置中设置触发距离onReachBottomDistance
  • 在触发距离内滑动期间,本事件只会被触发一次。

onPageScroll(Object)

监听用户滑动页面事件。

Object 参数说明:

属性 类型 说明
scrollTop Number 页面在垂直方向已滚动的距离(单位px)

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

onShareAppMessage(Object)

监听用户点击页面内转发按钮(<button> 组件 open-type="share")或右上角菜单“转发”按钮的行为,并自定义转发内容。

注意:只有定义了此事件处理函数,右上角菜单才会显示“转发”按钮

Object 参数说明:

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

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

自定义转发内容

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

示例代码

在开发者工具中预览效果

Page({
  onShareAppMessage(res) {
    if (res.from === 'button') {
      // 来自页面内转发按钮
      console.log(res.target)
    }
    return {
      title: '自定义转发标题',
      path: '/page/user?id=123'
    }
  }
})

onResize(object)

基础库 2.4.0 开始支持,低版本需做兼容处理

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

onTabItemTap(Object)

基础库 1.9.0 开始支持,低版本需做兼容处

点击 tab 时触发

Object 参数说明:

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

示例代码:

Page({
  onTabItemTap(item) {
    console.log(item.index)
    console.log(item.pagePath)
    console.log(item.text)
  }
})

组件事件处理函数

Page 中还可以定义组件事件处理函数。在渲染层的组件中加入事件绑定,当事件被触发时,就会执行 Page 中定义的事件处理函数。

示例代码:

在开发者工具中预览效果

<view bindtap="viewTap">click me</view>
Page({
  viewTap() {
    console.log('view tap')
  }
})


要做网站?680全包

要做小程序?680全包

咨询客服

蓝典客服热线 热线:05925325273 电话:13950058311 微信:13950058311 扫描二维码
添加客服微信

扫码关注

公众号:蓝典网络 (landianwl) 扫描二维码
关注蓝典公众号