页面事件处理函数

onPullDownRefresh

解释:在 Page 中定义 onPullDownRefresh 处理函数,监听该页面用户下拉刷新事件。

代码示例

在开发者工具中预览效果

  1. // page.js
  2. Page({
  3. onPullDownRefresh() {
  4. // do something
  5. }
  6. });

说明

  • 需要在app.jsonwindow选项中开启 enablePullDownRefresh
  • 如果需要单个页面支持下拉刷新,可以直接在页面目录下的 json 配置文件中开启enablePullDownRefresh
  • 当处理完数据刷新后,swan.stopPullDownRefresh页面事件处理函数 - 图1可以停止当前页面的下拉刷新。

onReachBottom

解释:在Page中定义 onReachBottom 处理函数,监听该页面用户上拉触底事件。

代码示例

在开发者工具中预览效果

  1. // page.js
  2. Page({
  3. onReachBottom(e) {
  4. console.log('onReachBottom')
  5. // 常见的业务场景是开发者在这里请求分页数据
  6. }
  7. });

说明

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

onPageScroll

解释:在 Page 中定义 onPageScroll 处理函数,监听用户滑动页面事件。方法参数:Object objectObject参数说明

字段类型说明
scrollTopNumber页面在垂直方向已滚动的距离(单位px)

代码示例

在开发者工具中预览效果

  1. // page.js
  2. Page({
  3. onPageScroll(e) {
  4. console.log(e)
  5. }
  6. });

注意:

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

onShareAppMessage

解释:在 Page 中定义 onShareAppMessage 函数,设置该页面的分享信息。

  • 用户点击页面内的"分享"按钮(button页面事件处理函数 - 图2 组件 open-type="share")或者页面右上角菜单的"分享"按钮的时候会调用;
  • 此事件需要 return 一个Object,用于自定义分享内容。

Web 态说明:Web 态下,由于暂不支持分享,该方法不生效。

百度APP中扫码体验:页面事件处理函数 - 图3方法参数:Object objectObject参数说明

参数名类型必填默认值说明
fromString分享事件来源。button:页面内转发按钮;menu:右上角分享菜单 。
targetObject如果 from 值是 button,则 target 是触发这次转发事件的 button,否则为 undefined。

自定义分享字段

参数名类型必填说明
titleString分享标题
contentString分享内容
imageUrlString分享图标
pathString页面 path,必须是以 / 开头的完整路径。
successFunction接口调用成功的回调函数
failFunction接口调用失败的回调函数
completeFunction接口调用结束的回调函数(调用成功、失败都会执行)

代码示例在开发者工具中预览效果

场景一:分享页面为 tab 页

  1. Page({
  2. data: {
  3. title: '全球实时财经行情'//推荐设置为具有小程序特色的标题
  4. },
  5. onShareAppMessage() {
  6. return {
  7. title: this.data.title,
  8. content: '世界很复杂,百度更懂你——小程序简介或详细描述',//推荐设置为小程序简介或描述
  9. imageUrl: 'https://b.bdstatic.com/miniapp/images/bgt_icon.png',
  10. path: '/index/index',
  11. success(res) {
  12. // 分享成功
  13. },
  14. fail(err) {
  15. // 分享失败
  16. }
  17. };
  18. }
  19. });

场景二:分享页面为详情落地页

  1. Page({
  2. data: {
  3. // 实际应用中动态获取
  4. title: '美的集团(000333)',//推荐设置为详情页title
  5. price: '58.2',
  6. quoteChange: '+1.3%',
  7. id: '000333'
  8. },
  9. onLoad(res) {
  10. swan.setNavigationBarTitle({
  11. title: this.data.title
  12. })
  13. },
  14. onShareAppMessage(res) {
  15. return {
  16. title: this.data.title + ' 最新报价' + this.data.price,
  17. content: '更精简的股票小程序——股票精灵,快来查看热门股票吧',//推荐设置为详情页简介
  18. imageUrl: 'https://b.bdstatic.com/miniapp/images/bgt_icon.png',
  19. path: `/stockDetail/stockDetail?id=${this.data.id}`
  20. }
  21. }
  22. });

场景三:分享页面为资讯落地页

  1. Page({
  2. data: {
  3. title: '瑞信:予美团“跑赢大市”评级',//推荐设置为文章标题
  4. content: [
  5. // 第一自然段
  6. '瑞信发布报告称,美团(03690)第三季外送业务同比增长约36%,加上盈利能力的持续改善,期内季绩将强劲增长,预计全年收入可同比增长38%至264亿元人民币,非国际财务报告准则净收益或达4.78亿元人民币。',
  7. // 第二自然段
  8. '该行称,尽管受季节性因素影响,第四季成本及补贴费用可能会较高,但预期业务正在稳步发展,期内订单量强劲增长或有助部分抵消季节性负面影响,相信今年全年可实现收支平衡,上调2019年盈利预测,调整后净利润达11亿元人民币。'
  9. ]//推荐设置为文章第一段
  10. },
  11. onLoad(options) {
  12. this.data.id = options.id || '';
  13. },
  14. onShareAppMessage() {
  15. return {
  16. title: this.data.title,
  17. content: this.data.content[0],
  18. imageUrl: 'https://b.bdstatic.com/miniapp/images/bgt_icon.png',
  19. path: '/article/article?id=${this.data.id}',
  20. };
  21. }
  22. });

TipsPage 中没有定义 onShareAppMessage 函数也可以正常调起分享功能,分享数据会优先使用setPageInfo中设置的页面标题和描述信息,其次使用小程序标题、小程序简介、小程序头像,再其次会使用默认智能小程序文案作为兜底,所以推荐开发者优先使用setPageInfo完善页面信息。

分享渠道及字段说明图示动态及微信好友示例朋友圈及QQ好友示例QQ空间及百度Hi示例新浪微博及截屏分享示例系统分享示例

onTabItemTap(Object object)

解释:点击 tab 时触发。

方法参数:Object objectObject参数说明

参数名类型说明最低版本
indexString被点击tabItem的序号,从0开始3.0.2页面事件处理函数 - 图9
pagePathString被点击tabItem的页面路径3.0.2页面事件处理函数 - 图10
textString被点击tabItem的按钮文字3.0.2页面事件处理函数 - 图11

代码示例在开发者工具中预览效果

  1. // tab.js
  2. Page({
  3. onTabItemTap(item) {
  4. console.log(item.index);
  5. console.log(item.pagePath);
  6. console.log(item.text);
  7. }
  8. });

onURLQueryChange

解释:在 Page 中定义 onURLQueryChange 处理函数,监听页面 URL query 改变。引起页面 URL query 更新的原因有:调用 swan.setURLQuery

方法参数:Object object

Object参数说明

字段类型说明
newURLQueryObject改变后的 URL query
oldURLQueryObject改变前的 URL query

代码示例在开发者工具中预览效果

  1. Page({
  2. onURLQueryChange({newURLQuery, oldURLQuery}) {
  3. console.log(newURLQuery, oldURLQuery) // 输出结果为 {channel: 'movie'} {}
  4. },
  5. onLoad(query) {
  6. if(!query.channel) {
  7. swan.setURLQuery({channel: 'movie'})
  8. }
  9. }
  10. })