uniapp解决原生组件层级过高覆盖页面组件的问题

文章发布于2020年12月04日 17:59, 归类于: 前端

问题

uiapp做app,页面中视频组件层级高于页面中所有的组件,导致底部固定定位的按钮被覆盖。可以使用原生对象绘制一个按钮固定在底部。

修改前

uniapp视频组件覆盖普通组件

解决过程

修改按钮的 z-index 无法解决。 使用 无法解决。 使用 .nvue 需要重新切图,还要兼顾.nvue的兼容问题,放弃。

最终决定使用原生控件对象

《nativeObj管理系统原生对象》:https://www.html5plus.org/doc/zh_cn/nativeobj.html#plus.nativeObj.View.hide

《原生控件对象》:https://www.html5plus.org/doc/zh_cn/nativeobj.html#plus.nativeObj.View

绘制控件需要注意

  • 关闭页面、页面前进需要把控件隐藏或者释放(销毁)。

  • (好像)在后面显示的控件层级比之前的原生组件层级高。

  • 控制好控件显示的时间和时机。

示例代码

写文章的人永远要记住!

第一,不要直接复制粘贴别人的文章。

第二,示例代码不要参杂你的业务代码。

因为这样做真的很烂。

<template>
	<view></view>
</template>

<script>
	export default {
		data() {
			return {
				view:null
			};
		},
		methods: {
			// 创建
			create() {
				// #ifdef APP-PLUS
				this.view = new plus.nativeObj.View('bottom-btn', {
						bottom: '0px',
						left: '0px',
						height: '45px',
						width: '100%',
						backgroundColor: '#1682e7'
					},
					[{
						tag: 'font',
						id: 'font',
						text: '在线咨询',
						textStyles: {
							size: '15px',
							color: '#ffffff'
						}
					}]);

        // 监听点击事件
				this.view.addEventListener("click", () => {
					console.log('点击了按钮')
				}, false);
				
				// 显示按钮
				this.show()
				// #endif
			}, 
			// 释放 关闭页面必须释放控件
			close() {
				this.view.close()
				this.view = null
			},
			// 显示按钮
			show() {
				if (!this.view) {
					this.create()
					return
				}
				this.view.show();
			},
			// 隐藏按钮
			hide() {
				this.view && this.view.hide()
			}
		},
		onShow() {
			this.show()
		},
		onHide() {
			this.hide()
		},
		onUnload() {
			this.close()
		}
	}
</script>

<style lang="scss">
</style>

修改后

解决uniapp视频组件覆盖普通组件

转载请注明来源:《 uniapp解决原生组件层级过高覆盖页面组件的问题》- rojerYong's Blog

文章链接:https://www.eoway.cn/article/1607075952.html

如果此文摘取了你的原创,请联系本站管理员,将对此文修改、删除处理。

--END--
上一篇:mpvue 微信小程序富文本视频播放 下一篇:arttemplate模板变量导入和使用