1、 我的使用场景:是详情下方需要定位一个签到按钮,然后去调用二维码扫一扫功能,但是video层级过高,下滑的时候会盖住按钮,查阅官方发现提供的有解决方案,如nvue、cover-view 组件或subNVue,但是感觉都比较麻烦,因此我选择使用plus.nativeObj.view方法。
onShow(){
this.view = new plus.nativeObj.View('test', { bottom: '0px', left: '0px', height: uni.upx2px(100) + 'px', width: '100%' });
this.view.drawRect({
color: '#fff', top: '0px', left: '0px', width: '100%', height: '100%'
})
this.view2 = new plus.nativeObj.View('aps',{ bottom: uni.upx2px(20) + 'px', zIndex: '10', left:
'35%', height: uni.upx2px(60) + 'px', width: '30%'
});
this.view2.drawRect(
{ color: '#dd3131', borderWidth: '2px', radius: uni.upx2px(30) + 'px' },
{ top: '0', left: '0px', width: '100%', height: '100%' }
);
let text = ''
if (this.form.meetingType == '1') {
text = `进入视频`
}
if (this.form.meetingType == '2') {
text = `去签到`
}
this.view2.drawText(text, { top: '0px', left: '0px', width: '100%', height: '100%' }, { align: 'center', 'font': uni.upx2px(28) + 'px', color: '#fff' });
this.view.show()
this.view2.addEventListener("click", this.nativeClick, false)
this.view2.show()
},
onUnload () {
this.closeNativeView()
},
methods(){
closeNativeView () {
this.view.close()
this.view2.close()
},
}
2、还有个坑的是,使用.nativeObj.view构建的视图,层级也是很高的,会导致,调出来二维码扫描页面的时候,这个签到按钮仍然存在。此时就需要调用uni.scanCode的时候,要先将nativeObj.view构建的视图关闭。再此之后,还需要在uni.scanCode的fail【接口调用失败的回调函数(识别失败、用户取消等情况下触发)】回调中再次去绘制视图,此时差不多算完全解决了video层级过高的问题
methods(){
scanCodeFn () {
this.closeNativeView()
let that = this
uni.scanCode({
scanType: ['qrCode'],
success: function (res) {
let params = JSON.parse(JSON.stringify(obj))
if (params.flag == '2') {
uni.showToast({
icon: 'none',
title: '请去扫签到码!'
})
return
}
that.signInOrSignOut(JSON.parse(res.result))
},
fail: function (res) {
that.getDetail()
}
});
}
}