要实现的功能是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() //获取页面信息接口方法
}