Achieve clicking on one of the tabbar items without jumping to the related page

The function to be implemented is that the tabbar has a code scanning function. After scanning, it jumps to the corresponding page based on the returned content and requests the corresponding interface to obtain page data.

 If you don’t want to customize the tabbar, the official website says:

If you want to click a tabitem on the App side without jumping to the page, you cannot use onTabItemTap. You can use plus.nativeObj.view (opens new window)< a i=2>Put a block to cover the original tabitem and intercept the click event.

So currently set in App.vue

globalData:{
	view:{}
},
onShow: function() {
    let that = this
	// 创建原生View控件
	this.globalData.view = new plus.nativeObj.View('test', {
		bottom: '0px',
		left: '33%',
		height: '50px',
		width: '33%',
		// backgroundColor:'#ff0000'
	});
	this.globalData.view.show();
	this.globalData.view.addEventListener("click", onClick, false);
	function onClick(e) {
		console.log("点击原生控件：" + JSON.stringify(e));
		uni.scanCode({
			success(res) {
				console.log(res)
				if(res.errMsg=='scanCode:ok'){
					console.log('扫码成功')
					that.globalData.view.close()
                    //可根据参数跳转相应页面
					uni.switchTab({
						url:'/pages/writeoff/writeoff'
					})
				}
		    }
		})
	}
}

Since I can't confirm the width of each tabbar item, and it's hard to center the view, since my tabbar has three items, I just make it left:'33%',width:'33% '

Just like this, and then remove the background color.

Since the view is set on the global App.vue, there is also this view at the bottom of the non-tabbar page, so you need to close the view in the routing pre-guard for pages whose path is not tabbar, where urlarr is the tabbar page path.

router.beforeEach((to, from, next) => {
    let urlarr = ['/pages/center/center','/pages/writeoff/writeoff','/pages/cancelnum/project']
	if(!urlarr.includes(to.fullPath)){
		console.log('覆盖关闭')
        // 此处不能用close()
		getApp().globalData.view.hide()
	}
}

Then I found that when jumping to other pages, because the view was hidden, clicking Scan again still jumped to the page directly. Therefore, the view needs to be displayed in onShow of the tabbar page, so that it can not be displayed in App.vue. You can delete this.globalData.view.show();

onShow(){
    getApp().globalData.view.show()
}

ps: When debugging, an error is reported, indicating that getApp().gloalData.view is undefined. Sure enough, I still can’t be lazy. I getApp().gloalData.view.show() during onLoad of the tabbar page and getApp().gloalData during onHide. view.hide(), delete the front guard

ps: Click to scan and jump to the corresponding page. This page is also a tabbar page. You can also click to scan, but the page will not be refreshed after scanning.

Need to be added when app.vue jumps to the page

uni.switchTab({
	url:'/pages/writeoff/writeoff',
	success(){
		let page = getCurrentPages().pop();
		if (page == undefined || page == null) return;
		page.$vm.reload(codedata.order_id);
	}
})

然后在/pages/writeoff/writeoff页面中添加方法
reload(order_id) {
	this.order_id = order_id
	this.writeoffdetail()  //获取页面信息接口方法
}