uni-app事件、生命周期函数

uni-app学习

uni中的事件

事件绑定
在uni中事件绑定和vue一样，通过v-on进行绑定，可以简写为@

<button type="primary" v-on:click="handClick">点我</button>

可以简写为:

<button type="primary" @click="handClick">点我</button>

在methods中：

methods：{
	handClick（）{
	console.log('点到我啦')
	}
}

内联处理器的方法
除了直接绑定到一个方法，也可以在内联js语句中调用方法：

<div id="exam">
  <button v-on:click="say('hi')">Say hi</button>
  <button v-on:click="say('what')">Say what</button>
</div>

new Vue({
  el: '#exam',
  methods: {
    say: function (message) {
      alert(message)
    }
  }
})

事件修饰符

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

uni的生命周期函数

应用的生命周期

生命周期的概念：一个对象从创建、运行、销毁的整个过程被成为生命周期。
生命周期函数：在生命周期中每个阶段会伴随着每一个函数的触发，这些函数被称为生命周期函数

函数名	说明
onLaunch	当uni-app初始化完成时触发
onShow	当uni-app启动，或从后台进入前台显示
onHide	当uni-app从前台进入后台
onError	当uni-app报错时触发

export default{
	onLaunch:function(){
		console.log('Launch')
	},
	onShow:function(){
		console.log('Show')
	},
	onHide:function(){
		console.log('Hide')
	},
	onError:function(err){
		console.log('出现异常',err)
	}
}

页面的生命周期

函数名	说明
onLoad	监听页面加载，其参数为上个页面传递的数据，参数类型为Object（用于页面传参）
onShow	监听页面显示
onReady	监听页面初次渲染完成
onHide	监听页面隐藏
onUnload	监听页面卸载
onResize	监听窗口尺寸变化
onPullDownRefresh	监听用户下拉动作，一般用于下拉刷新
onTabItemTap	点击 tab 时触发，参数为Object
onReachBottom	页面上拉触底事件的处理函数
onShareAppMessage	用户点击右上角分享
onNavigationBarSearchInputChanged	监听原生标题栏搜索输入框输入内容变化事件
onNavigationBarSearchInputConfirmed	监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的“搜索”按钮时触发
onNavigationBarSearchInputClicked	监听原生标题栏搜索输入框点击事件

export default{
	onLoad(){
		console.log('页面加载了')
	},
	onShow(){
		console.log('页面显示了')
	},
	onReady(){
		console.log('页面初次渲染完成')
	}，
	onHide(){
		console.log('页面隐藏了')
	}
}

注意：
onLoad和onReady不会多次触发，onShow和onHide会多次触发

下拉刷新

onPullDownRefresh

在js中定义，监听该页面用户下拉刷新

1. 在pages.json里，找到当前页面的pages节点，并在style选项中开启 enablePullDownRefresh。
2. 当处理完数据刷新后，uni.stopPullDownRefresh 可以停止当前页面的下拉刷新。

<view v-for="item in list">
	{{item}}
view>

exort default{
	data(){
		return{
			list:['前端','Java','美工']
		}
	}，
	<!-- 页面刷新两秒之后停止刷新 -->
	onPullDownRefresh(){
		console.log('出发了下拉刷新')
		setTimeout(()=>{
			this.list=['美工','前端','Java']
			uni.stopPullDownRefresh()
		},2000)
	}
}

点击下拉刷新

<view v-for="item in list">
	{{item}}
view>
<button @click="pullDown">点击下拉刷新button>

exort default{
	data(){
		return{
			list:['前端','Java','美工']
		}
	}，
	<!-- 页面刷新两秒之后停止刷新 -->
	onPullDownRefresh(){
		console.log('出发了下拉刷新')
		setTimeout(()=>{
			this.list=['美工','前端','Java']
			uni.stopPullDownRefresh()
		},2000)
	},
	methdos:{
		pullDown(){
			uni.startPullDownRefresh()
		}
	}
}

上拉加载

<view v-for="item in list">
	{{item}}
view>

exort default{
	data(){
		return{
			list:['前端','Java','美工']
		}
	}，
	<!-- 页面刷新两秒之后停止刷新 -->
	onPullDownRefresh(){
		console.log('出发了下拉刷新')
		setTimeout(()=>{
			this.list=['美工','前端','Java']
			uni.stopPullDownRefresh()
		},2000)
	},
	onReachBottom(){
		this.list =[...this.list,['美工','前端','Java']]
	}
}