uni-app页面周期函数

页面周期函数

  1. onLoad
    监听页面加载,其参数为上个页面传递的数据,参数类型为Object(用于页面传参)
uni.navigateTo({
    url: 'test?id=1&name=uniapp'
});
// test.vue
export default {
    onLoad: function (option) {    //option为object类型,会序列化上个页面传递的参数
        console.log(option.id);       //打印出上个页面传递的参数。
        console.log(option.name); //打印出上个页面传递的参数。
    }
}
  1. onShow
    监听页面显示。页面每次出现在屏幕上都触发,包括从下级页面点返回露出当前页面

onLoad 和 onShow的区别
onLoad: 页面加载
一个页面只会调用一次。
接收页面参数 可以获取uni.navigateTo和uni.redirectTo及中的 query。 (通俗点就是 你编辑好代码后 点击保存 这时候整个程序加载 这个页面也会加载 就会跑这里的函数 只要页面加载 就会跑)
onShow: 页面显示
每次打开页面都会调用一次。(页面加载好之后 你切到其他页面 再回来 显示这个页面 之前加载过的话 onLoad就不跑了 这是 页面信息呈现在你面前的这个过程 会跑onShow )

  1. onReady
    监听页面初次渲染完成。注意如果渲染速度快,会在页面进入动画完成前触发

  2. onHide
    监听页面隐藏

  3. onUnload
    监听页面卸载

  4. onResize
    监听窗口尺寸变化(5+App、微信小程序)

  5. onPullDownRefresh
    监听用户下拉动作,一般用于下拉刷新

//pages.json
{
   "pages": [
       {
           "path": "pages/index/index",
           "style": {
               "navigationBarTitleText": "uni-app",
               "enablePullDownRefresh": true
           }
       }
   ],
   "globalStyle": {
       "navigationBarTextStyle": "white",
       "navigationBarBackgroundColor": "#0faeff",
       "backgroundColor": "#fbf9fe"
   }
}
index.vue
// 仅做示例,实际开发中延时根据需求来使用。
export default {
   data: {
       text: 'uni-app'
   },
   onLoad: function (options) {
       setTimeout(function () {
           console.log('start pulldown');
       }, 1000);
       uni.startPullDownRefresh();
   },
   onPullDownRefresh() {
       console.log('refresh');
       setTimeout(function () {
           uni.stopPullDownRefresh();
       }, 1000);
   }
}
  1. onReachBottom
    页面上拉触底事件的处理函数
export default {
   	data() {
   		return {
   			pageSize:0,
   			pageNum:15,
   			list:[],
   			pages:0,
   		};
   	},
   	onReachBottom() {
   		if (this.pageNum >= this.pages) {
   			return
   		}
   		console.log(1);
   		this.pageNum++;
   		this.init();
   	},
   	methods:{
   		init() {
   			uni.showLoading({
   				title: '加载中',
   			})
   			this.$Ajax('/front/financial/rechargeList', {
   				pageNum: this.pageNum,
         			pageSize: this.pageSize
   			}, (res) => {
   				console.log(JSON.stringify(res));
   				var list = res.obj.list;
   				this.pages = res.obj.pages;
   				this.list = this.list.concat(list);
   				uni.hideLoading()
   			})
   		},
   	}
   }
  1. onShareAppMessage
    用户点击右上角分享 (微信小程序、百度小程序、头条小程序、支付宝小程序)
  2. onPageScroll
    监听页面滚动,参数为Object
  3. onNavigationBarButtonTap
    监听原生标题栏按钮点击事件,参数为Object(5+ App、H5)
{
   		"path": "pages/tXpage/tXpage", 
   		"style": {
   			"navigationBarTitleText": "提现", 
   			"navigationBarTextStyle": "black",
   			"bounce": "none",
   			"app-plus": {
   				 "titleNView": {
   				     "buttons": [ //原生标题栏按钮配置,
   				        {
   						   "width":"auto",
   						   "fontSize": "16",
   				           "text": "记录" 
   				        }
   				    ]
   				}
   			}
   		}
   	}
  1. onBackPress
    监听页面返回,返回 event = {from:backbutton、 navigateBack} ,backbutton 表示来源是左上角返回按钮或 android 返回键;navigateBack表示来源是 uni.navigateBack
onBackPress(){
   		uni.showModal({  
   		title: '提示',  
   		content: '是否退出应用?',  
   		success: function(res) {  
   			if (res.confirm) {  
   				// 退出当前应用,该方法只在App中生效  
   				plus.runtime.quit();  
   			} else if (res.cancel) {  
   				console.log('用户点击取消');  
   			}  
   		}  
   	  }); 
   	 return true;
   	},
  1. onNavigationBarSearchInputChanged
    监听原生标题栏搜索输入框输入内容变化事件(5+App、H5)
  2. onNavigationBarSearchInputConfirmed
    监听原生标题栏搜索输入框搜索事件,用户点击软键盘上的“搜索”按钮时触发(5+App、H5)
  3. onNavigationBarSearchInputClicked
    监听原生标题栏搜索输入框点击事件(5+App、H5)

你可能感兴趣的:(uni-app)