网络营销网站类型,做外贸主要在那些网站找单,公司网站建设合同模板,三网一体网站建设我们想要在地图上层添加自定义组件#xff0c;比如一个数据提示框#xff0c;点一下会展开#xff0c;再点一下收起#xff0c;在h5段显示正常#xff0c;但是到app端真机测试发现组件显示不出来#xff0c;这是因为map是内置原生组件#xff0c;层级最高#xff0c;自…我们想要在地图上层添加自定义组件比如一个数据提示框点一下会展开再点一下收起在h5段显示正常但是到app端真机测试发现组件显示不出来这是因为map是内置原生组件层级最高自定义组件被挡住了无论如何设置自定义组件的z-index都没有用。
如果只是简单加一点文字之类直接放在cover-view里就可以显示在map上层了但如果内容很复杂最好使用subNVuehello uniapp里也有例子在实例-接口-界面下边。
1、创建一个nvue页面也就是需要在map上层显示的组件这是子组件原生子窗体只能用nvue开发必须遵循nvue的语法规则很多uniapp组件在nvue里使用不了很多css也使用不了这是比较考验耐心的开发前多研究一下nvue和vue的区别。
nvue所支持的通用样式已在本文档中全部列出一些组件可能有自定义样式请参考组件文档。除此之外的属性均不被支持。 | uni-app官网
templateview classbox!-- 收起 --view classopen clickonclick() v-ifopen/view!-- 展开 --view classclose clickonclick() v-else/view/view
/templatescriptexport default {data() {return {open: false}},methods: {onclick() {this.open !this.open;}}}
/scriptstyle scoped.open {position: absolute;top: 50%;right: 15%;width: 200upx;height: 200upx;background-color: #ff007f;}.close {position: absolute;top: 50%;right: 15%;width: 50upx;height: 200upx;background-color: #ff007f;}
/style
2、在地图显示的这个页面里的pages.json如下图配置
position设置为absolutetop设置为50%left和right这些不用设置了作用不大具体位置放到nvue页面去设置背景色一定要设置为透明。
pages: [ //pages数组中第一项表示应用启动页参考https://uniapp.dcloud.io/collocation/pages{path: pages/index/index,style: {navigationBarTitleText: uni-app,app-plus: {subNVues: [{id: tip, // 唯一标识 path: pages/index/component/tip, // 页面路径style: {position: absolute,//设置位置top: 50%,background: transparent//一定要设置为透明背景否则会跟map并排显示}}]}}}],
在index页面不需要引入tip组件直接运行index页面组件就可以显示了如果需要动态控制原生子窗体的显示隐藏参考官网uni-app官网
uni-app subNVue 原生子窗体开发指南 - DCloud问答 这个代码里getSubNVueById的参数也就是pages.json里配置的id是原生子窗体的唯一标识。
// 通过 id 获取 nvue 子窗体
const subNVue uni.getSubNVueById(tip)
// 打开 nvue 子窗体
subNVue.show(slide-in-left, 300, function(){ // 打开后进行一些操作... //
});
// 关闭 nvue 子窗体
subNVue.hide(fade-out, 300) 最终效果
