使用nvue的背景(只能在app端使用)
当你需要覆盖页面的标题栏和tabbar时,或者某些内置组件的z-index过高无法覆盖时,这时就可以使用nvue页面来覆盖这些z-index过高的组件或标题栏和tabbar
注意:如果在app.vue里有公共样式的,需要通过条件编译,让这些公共样式不作用到nvue上,否则运行会报错会
uniapp条件编译
1.创建一个nvue页面
https://uniapp.dcloud.io/use-weex
// 这里需要注意一下,在uniapp项目里至少要有一个vue文件,不然创建nvue文件到后面会报错
2.在page.json中做好配置
https://uniapp.dcloud.io/collocation/pages?id=app-plus
在需要使用nvue的页面下配置 app-plus
3.在vue通过uni.getSubNVueById()方法获取nvue的实例,并让nvue显示出来
https://uniapp.dcloud.io/api/window/subNVues
// 'drawer' 是之前在page.json中配置时nvue的id
methods: {
nvueShow: function() {
const subnvue = uni.getSubNVueById('drawer') // 获取nvue
subnvue.show() // 显示nvue
}
}
4.开发nvue页面
nvue开发与vue开发的常见区别
(经过前面三步nvue已经可以在vue页面使用了,现在需要做的就是开发nvue,这也是最简单的一步)
nvue和vue页面开发基本一样,只是nvue的css写法收到了限制,比如nvue的每个元素都自动添加了display: flex;flex-direction: column;
的css属性,而且文本内容必需写在text
里面,详细情况看