uniapp自定义头部返回按钮

为了解决用户在当前页面输入一些值后误触返回按钮造成的问题,这个时候就需要用到自定义返回了. uniapp上有针对于点击返回按钮的生命周期 这个生命周期里面只要返回true就可以阻止uniapp自带的返回

 onBackPress(e) {
    if (e.from === 'navigateBack') {
	    return false;
        }
        const arr = Object.values(this.formData)
	let count = 0
	arr.forEach(item => {
		if (item !== '') {
			count++
		}
	})
	console.log(count)
	if (count > 3) {
		uni.showModal({
			title: '警告',
			content: '当前页面有值未提交,是否确认返回?',
			success: function(res) {
				if (res.confirm) {
					uni.navigateBack({
						delta: 1
					});
				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		});
	} else {
		uni.navigateBack({
			delta: 1
		});
	}
	return true;
}

如果直接使用navigateBack代替返回的会进入死循环,因为navigateBack也会触发onBackPress,所以要在onBackPress做判断,根据e.from判断返回的来源是什么,如果是backbutton就会触发我们自定义的返回,navigateBack执行默认返回事件