小程序的page中的一些固有方法总结

page中有data和方法

//index.js
Page({
  data: {
    text: "This is page data."
  },
  onLoad: function(options) {
    // Do some initialize when page load.
  },
  onReady: function() {
    // Do something when page ready.
  },
  onShow: function() {
    // Do something when page show.
  },
  onHide: function() {
    // Do something when page hide.
  },
  onUnload: function() {
    // Do something when page close.
  },
  onPullDownRefresh: function() {
    // Do something when pull down.
  },
  onReachBottom: function() {
    // Do something when page reach bottom.
  },
  onShareAppMessage: function () {
    // return custom share data when user share.
  },
  onPageScroll: function() {
    // Do something when page scroll
  },
  onResize: function() {
    // Do something when page resize
  },
  onTabItemTap(item) {
    console.log(item.index)
    console.log(item.pagePath)
    console.log(item.text)
  },
  // Event handler.
  viewTap: function() {
    this.setData({
      text: 'Set some data for updating view.'
    }, function() {
      // this is setData callback
    })
  },
  customData: {
    hi: 'MINA'
  }
}

生命周期函数

onLoad(Object query)

页面加载时触发。一个页面只会调用一次
参数是跳转到当前页面路径中拼接的参数——query对象。

onShow() onHide()

页面显示/切入前台时触发。
页面隐藏/切入后台时触发。 如 wx.navigateTo 或底部 tab 切换到其他页面，小程序切入后台等。

onReady()

页面初次渲染完成时触发。一个页面只会调用一次，可以和视图层进行交互。

注意：对界面内容进行设置的 API 如wx.setNavigationBarTitle，请在onReady之后进行。

onUnload()

页面卸载时触发。如wx.redirectTo或wx.navigateBack到其他页面时。

页面事件处理函数

onPullDownRefresh()下拉刷新

• 需要在app.json的window选项中或页面配置中开启enablePullDownRefresh。
• wx.startPullDownRefresh模拟自动触发下拉刷新
• wx.stopPullDownRefresh停止当前页面的下拉刷新。

onReachBottom()上拉触底

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

onPageScroll(Object object)监听用户滑动页面事件。

 onPageScroll(e){
	e.scrollTop   //页面在垂直方向已滚动的距离（单位px）
 }

onShareAppMessage(Object object)

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

<button open-type='share'>分享</button>

onShareAppMessage: function (res) {
    if (res.from === 'button') {
      // 来自页面内转发按钮
      console.log(res.target)
    }
    return {
      title: '自定义转发标题',
      path: '/page/user?id=123'  //当前转发页面的路径
      imageUrl:''  //图片路径
    }
  }
})

res.from==
button：页面内转发按钮；
menu：右上角转发菜单

onResize(Object object)

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

onTabItemTap(Object object)

点击 tab 时触发

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