实现点击tabbar其中一项不跳转相关页面

要实现的功能是tabbar有一个扫码功能,扫描之之后根据返回内容跳转到相应页面,请求相应接口获取页面数据

 不想自定义tabbar,官网上说:

如果想在App端实现点击某个tabitem不跳转页面,不能使用onTabItemTap,可以使用plus.nativeObj.view (opens new window)放一个区块盖住原先的tabitem,并拦截点击事件。

所以目前在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'
					})
				}
		    }
		})
	}
}

由于无法确认tabbar每一项的宽度,也不好让view居中,由于我的tabbar是三项,就干脆让它left:'33%',width:'33%'

就像这样,然后把背景颜色去掉就可以了。

由于view设置在全局App.vue上的,非tabbar页面底部也有这个view,所以就需要在路由前置守卫中,将路径不是tabbar的页面关闭view,其中urlarr就是tabbar页面路径

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()
	}
}

然后发现在跳转到其他页面时,由于view被隐藏了,再次点击扫一扫还是直接跳转页面了。所以需要在tabbar页面的onShow中让view显示,这样在App.vue中就可以不显示了,可以将this.globalData.view.show();删了

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

ps:真击调试报错了,提示getApp().gloalData.view未定义,果然还是不能偷懒,挨个在tabbar页面onLoad时getApp().gloalData.view.show(),onHide时getApp().gloalData.view.hide(),前置守卫的删掉

ps:点击扫一扫后跳转到对应页面,这个页面也是tabbar页面,也可以点击扫码,但是扫描之后并没有刷新页面

需要在app.vue跳转页面的时候加上

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()  //获取页面信息接口方法
}

  • 3
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值