最近在做一个外包项目时,详情中会有一个video
,而评论的按钮会被video
覆盖,因为app
中的代码解析方式,是weex
式解析,而video
又是uni中的原生组件,uni中原生组件的图层是无穷大的,很多网上的大佬给出了好几种方案,其中最多的是nvue
,我也是在试过之后才发现,nvue
并不是最佳解决方案(对于我开发的这个项目而言)
话不多说:一下有三种解决方案(解决方案当然不止三种),而我用的是第三种。
使用plus.nativeObj方法
的解决方案onShow(){
// #ifdef APP-PLUS
var icon = plus.nativeObj.View.getViewById("icon");
//如果已经存在
if(icon){
//则显示
icon.show();
}else{
//不存在 则创建
this.createtab();
}
// #endif
},
//离开页面隐藏
onUnload(){
//在app端不支持cover-view嵌套
// #ifdef APP-PLUS
var icon = plus.nativeObj.View.getViewById("icon");
icon.hide();
// #endif
},
onHide(){
// #ifdef APP-PLUS
var icon = plus.nativeObj.View.getViewById("icon");
icon.hide();
// #endif
},
methods: {
createtab: function(){
// 设置水平居中位置
var bitmap = new plus.nativeObj.Bitmap('bmp1');
var view = new plus.nativeObj.View('icon', {
top: '30px',
left: '10px',
width: '30px',
height: '30px'
});
view.drawBitmap('/static/back.png', {
top: '0px',
left: '0px',
width: '100%',
height: '100%'
});
view.addEventListener("click", function(e) {
uni.navigateBack({
delta: 1
});
}, false);
view.show();
},
}
这种是在掘金中发现的一篇帖子,本人也试过了,并不适合我这个项目,果断放弃,不过其他小伙伴可以参考哦!
nvue
:也是比较常用解决方案首先要在page.json
中申明一个nvue
的文件,其中要注意的几点:里面的id
是唯一的标识,类似于主键,接下来就是路径,path
里面的路径最好是在文件夹下两层,不要问为什么,因为我试过,没有在下两层的时候,没效果。= = 。
{
"path": "community/postDetail",
"style": {
"navigationBarTitleText": "帖子详情",
"navigationStyle": "custom",
"app-plus": {
"titleNView": false,
"subNVues":[{
"id": "popup",
"path": "community/postDetail/subNVue/popup",
"style": {
"position":"absolute",
"bottom":"0rpx",
"left":"0rpx",
"margin": "auto",
"width": "100%",
"height": "118rpx"
}
}]
}
}
}
nvue
中有很多对css的限制,可以参开一下:https://www.cnblogs.com/cyhsmile/p/13925477.html
不过这种方式在我这个项目中也行不通,我发现input
调用微软键盘的时候会出现bug
,我也是在做完所有的准备,准备写的时候才知道的,于是我又换了一中思路,
v-html
:这种思路是比较难受的,虽然难受,但是还是能实现的在页面渲染的时候,利用v-html
将video
包裹在view
中,再给评论框给上一个z-index
,层级问题就可以得到解决:
<view class="imgArr videobox">
<view class="videobox1" v-html="videoHtml" @click="playItemVideo(videoHtml)">view>
view>
这里面的参数可以给到包裹在里面的video
,是用来兼容苹果手机的,
我们在点击的时候就可以直接给视频来一手autoplay
。
好啦!菜鸟献上,不喜勿喷!