小程序页面的生命周期函数
2021-01-09 本文已影响0人
泡杯感冒灵
先看下页面都有哪些生命周期函数
// pages/test/test.js
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
-
onLoad() 页面加载时触发。一个页面只会调用一次，可以在 onLoad 的参数中获取打开当前页面路径中的参数。
-
onShow() 页面显示/切入前台时触发。
-
onReady() 页面初次渲染完成时触发。一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。注意：对界面内容进行设置的 API 如wx.setNavigationBarTitle，请在
onReady之后进行 -
onHide() 页面隐藏/切入后台时触发。 如 wx.navigateTo 或底部
tab切换到其他页面，小程序切入后台等。 -
onUnload()页面卸载时触发。如wx.redirectTo或wx.navigateBack到其他页面时
-
onPullDownRefresh() 这个生命周期函数，是下拉刷新时触发，要开启下拉刷新还需要我们在页面的json文件中配置一下
-
页面卸载时触发。如wx.redirectTo或wx.navigateBack到其他页面时。
{
"usingComponents": {},
"enablePullDownRefresh": true // 当值为false时，不会触发
}
- onReachBottom() 监听用户上拉触底事件.* 可以在
app.json的window选项中或页面配置中设置触发距离onReachBottomDistance。在触发距离内滑动期间，本事件只会被触发一次。 - onPageScroll() 监听用户滑动页面事件。
- onAddToFavorites() 监听用户点击右上角菜单“收藏”按钮的行为，并自定义收藏内容。
Page({
onAddToFavorites(res) {
// webview 页面返回 webviewUrl
console.log('WebviewUrl: ', res.webviewUrl)
return {
title: '自定义标题',
imageUrl: 'http://demo.png',
query: 'name=xxx&age=xxx',
}
}
})
- onShareAppMessage()监听用户点击页面内转发按钮（button组件
open-type="share"）或右上角菜单“转发”按钮的行为，并自定义转发内容。注意：只有定义了此事件处理函数，右上角菜单才会显示“转发”按钮
Page({
onShareAppMessage: function (res) {
if (res.from === 'button') {
// 来自页面内转发按钮
console.log(res.target)
}
return {
title: '自定义转发标题',
path: '/page/user?id=123'
}
}
})
- onShareTimeline()监听右上角菜单“分享到朋友圈”按钮的行为，并自定义分享内容。注意：只有定义了此事件处理函数，右上角菜单才会显示“分享到朋友圈”按钮。自定义转发内容
- onResize()小程序屏幕旋转时触发
- onTabItemTap()点击 tab 时触发
Page({
onTabItemTap(item) {
console.log(item.index)
console.log(item.pagePath)
console.log(item.text)
}
})
