uniapp 视频遮挡顶部导航
页面滑动时 视频会遮盖在顶部导航栏上方方案一使用nvue重写页面nvue与vue语法上的区别不支持padding-top padding-left等background-color要用行内样式nvue页面支持flex布局 不支持其他布局方式 默认采用竖向排列nvue初次尝试 用不太习惯 后来又遇到引入富文本会莫名的出现闪隐 继续寻找其他办法方案二(推荐)用plus.nativeObj.view实现
·
页面滑动时 视频会遮盖在顶部导航栏上方
遮挡了上面的导航
方案一
使用nvue重写页面
nvue与vue语法上的区别
- 不支持padding-top padding-left等
- background-color要用行内样式
- nvue页面支持flex布局 不支持其他布局方式 默认采用竖向排列
nvue初次尝试 用不太习惯 后来又遇到引入富文本会莫名的出现闪隐 继续寻找其他办法
方案二(推荐)
用plus.nativeObj.view实现顶部导航 这样顶部导航的层级就会高于 视频了
create() {
plus.navigator.setStatusBarBackground('#6495ED');
plus.navigator.setStatusBarStyle('light');
// #ifdef APP-PLUS
this.view = new plus.nativeObj.View(
'bottom-btn',
{
top: '0px',
// paddingTop:'23px',
'padding-right': '200px',
left: '0px',
height: '68px',
width: '100%',
backgroundColor: '#ffffff'
},
[
{
tag: 'font',
id: 'font',
text: '门店详情',
textStyles: {
size: '15px',
color: '#000000'
},
//控制位置
position: {
top: '18px'
}
},
{
tag: 'img',
id: 'img',
src: 'static/back.png',
position: {
top: '38px',
left: '30px',
width: '11px',
height: '20px'
}
}
]
);
this.show();
// #endif
this.view.addEventListener('click', this.ViewClick, false);//不能在内部控件上添加点击事件
},
ViewClick() {
uni.navigateBack();
},
show() {
if (!this.view) {
this.create();
return;
}
this.view.show();
},
hide() {
this.view && this.view.hide();
},
getDetail(id) {
console.log(id)
this.$R.post('/app/showShop/detail', { id }).then(res => {
this.list = res.data;
});
},
getTo() {
console.log('kkk');
}
},
//要自己在页面切换的时候控制隐藏出现
onShow() {
this.show();
console.log('出现');
},
onUnload() {
this.hide();
console.log('隐藏了');
}
小白一只 也是刚了解到plus.nativeObj.view 去看官方文档 一脸懵 看不懂 还有待学习
更多推荐
已为社区贡献2条内容
所有评论(0)