uniapp:使用subNVue原生子窗体在map上层添加自定义组件

我们想要在地图上层添加自定义组件,比如一个数据提示框,点一下会展开,再点一下收起,在h5段显示正常,但是到app端真机测试发现组件显示不出来,这是因为map是内置原生组件,层级最高,自定义组件被挡住了,无论如何设置自定义组件的z-index都没有用。

如果只是简单加一点文字之类,直接放在cover-view里,就可以显示在map上层了,但如果内容很复杂,最好使用subNVue,hello uniapp里也有例子,在实例-接口-界面下边。

1、创建一个nvue页面,也就是需要在map上层显示的组件,这是子组件,原生子窗体只能用nvue开发,必须遵循nvue的语法规则,很多uniapp组件在nvue里使用不了,很多css也使用不了,这是比较考验耐心的,开发前多研究一下nvue和vue的区别。

nvue所支持的通用样式已在本文档中全部列出,一些组件可能有自定义样式,请参考组件文档。除此之外的属性,均不被支持。 | uni-app官网

<template><view class="box"><!-- 收起 --><view class="open" @click="onclick()" v-if="open"></view><!-- 展开 --><view class="close" @click="onclick()" v-else></view></view>
</template><script>export default {data() {return {open: false}},methods: {onclick() {this.open = !this.open;}}}
</script><style 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设置为absolute,top设置为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)

 最终效果:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/108909.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

从0开始编写BP,自适应学习率的BP神经网络,不使用MATLAB工具箱,纯手写matlab代码,以BP分类为例...

与上篇文章不同&#xff0c;仔细读了上篇文章的小伙伴应该知道&#xff0c;BP神经网络是有一个学习率的&#xff0c;而这个学习率很大程度上决定着神经网络的效果。这里采用自适应学习率&#xff0c;实现纯手写BP神经网络。 编程时&#xff0c;激活函数选择Sigmoid函数&#xf…

每日一记项目,拼图小游戏

利用一下午时间&#xff0c;写了这个每日一记项目&#xff0c;以复习IO的操作练习&#xff08;源码在文章最下方&#xff08;免费&#xff09;&#xff09; 每日一记&#xff1a; https://download.csdn.net/download/weixin_73048842/88438670 拼图小游戏&#xff0c;登录注…

MFC-列表控件

目录 1、更改列表控件的属性&#xff1a; 2、代码设置表头&#xff1a; 3、设置正文内容&#xff1a; 4、设置属性&#xff0c;显示成表格形式 &#xff1a; 5、代码实现&#xff1a; 1、更改列表控件的属性&#xff1a; VIEW设置为Report模式会出现表格形状 2、代码设置…

二维码智慧门牌管理系统:高效标准化处理地址数据

文章目录 前言一、标准化数据的重要性二、标准检查与自动化处理三、人工修复与高效性四、数据应用与效益 前言 随着科技的快速发展&#xff0c;数据管理在现代社会中扮演着越来越重要的角色。为了提升数据质量&#xff0c;标准化检查成为必不可少的环节。今天&#xff0c;我们…

软考系统架构设计师考试冲刺攻略

系统架构冲刺攻略 上篇为综合知识&#xff0c;介绍了系统架构设计师应熟练掌握的基本知识&#xff0c;主要包括绪论、计算机系统、信息系统、信息安全技术、软件工程、数据库设计、系统架构设计、系统质量属性与架构评估、软件可靠性、软件架构的演化和维护、未来信息综合技术等…

vim的配置文件

用户级别配置文件 ~/.vimrc 修改用户级别的配置文件只会影响当前用户, 不会影响其他的用户. 例如: 在用户的家目录下的.vimrc文件中添加 set tabstop4 ----设置缩进4个空格 set nu ----设置行号 set shiftwidth4 —设置ggG缩进4个空格, 默认是缩进8个空格 系统级别配置文件 /e…

axios 请求的缓存封装

前言 咱们的网站或者程序&#xff0c;每一个页面和操作都需要请求后端接口来获取响应和渲染页面&#xff0c;抛开post请求方式的接口不说&#xff0c;部分get请求得到的数据&#xff0c;短时间内不会更新&#xff0c;或者短时间得到的响应数据不会变化&#xff0c;这个时候就可…

【面试经典150 | 区间】插入区间

文章目录 Tag题目解读题目来源解题思路方法一&#xff1a;合并区间方法二&#xff1a;模拟 其他语言python3 写在最后 Tag 【模拟】【数组】 题目解读 给定一个含有多个无重叠区间的数组&#xff0c;并且数组已经按照区间开始值升序排序。在列表中插入一个新的区间&#xff0…

小程序原生代码转uniapp

写了一份小程序原生代码&#xff0c;想转为uniapp 再转为其他平台发布 1、在命令行里&#xff0c;运行【 npm install miniprogram-to-uniapp -g 】进行安装&#xff0c;因为这个包是工具&#xff0c;要求全局都能使用&#x…

JS加密/解密之webpack打包代码逆向

Webpack 是一个强大的打包工具&#xff0c;能够将多个文件打包成一个或多个最终的文件。然而&#xff0c;将已经经过打包的代码还原回原始源代码并不是一件直接的事情&#xff0c;因为 webpack 打包的过程通常会对代码进行压缩、混淆和优化&#xff0c;丢失了部分变量名和代码结…

【C++11新特性】右值引用和移动语义(移动构造,移动赋值)

文章目录 前言一、列表初始化&#xff08;不同于初始化列表&#xff09;二、initializer_list三、decltype关键字四、nullptr五、右值引用移动拷贝和移动赋值被编译器识别成将亡值的原因 左值引用和右值引用的场景和价值右值引用的场景move函数 六、关于右值引用的功能和属性问…

全景分割的自监督学习

在本章中,我们将第3章中讨论的SSL方法扩展到语义和全景分割任务。使用手动生成的标签训练的卷积神经网络通常用于语义或实例分割。 在精准农业中,自动化花朵检测方法使用监督模型和后处理技术,随着花朵的外观和数据采集条件的变化,这些技术可能无法始终如一地执行。我们提…

pinctrl子系统 - 架构和结构体关系(四)

一&#xff0c;pinctrl的引入 由于SoC系统越来越复杂、集成度越来越高&#xff0c;SoC中pin的数量也越来越多、功能也越来越复杂&#xff0c;这就对如何管理、使用这些pins提出了挑战。因此&#xff0c;用于管理这些pins的硬件模块&#xff08;pin controller&#xff09;就出…

C++基础——结构体

1 概述 结构体是用户自定义的数据类型&#xff0c;可以包含不同的数据类型 2 定义和使用 定义一个学生的结构体 //结构体定义 struct student {//成员列表string name; //姓名int age; //年龄int score; //分数 }stu3; //结构体变量创建方式3 int main() {//结构体…

ChatGPT 的工作原理学习 难以理解 需要先找个容易的课来跟下。

ChatGPT 的工作原理 传统搜超搜引擎原理&#xff1a;蜘蛛抓取和数据收集&#xff0c;用户交互查找。 ChatGPT 的工作原理&#xff1a;数据收集称为预训练&#xff0c;用户响应阶段称为推理。 ChatGPT是一种基于自然语言处理技术的人工智能模型&#xff0c;它的工作原理建立在…

AWS SAP-C02教程4--身份与联合身份认证

AWS的账号和权限控制一开始接触的时候觉得很复杂,不仅IAM、Identiy Federation、organization,还有Role、Policy等。但是其实先理清楚基本一些概念,然后在根据实际应用场景去理解设计架构,你就会很快掌握这一方面的内容。 AWS的账号跟其它一些云或者说一些SAAS产品的账号没…

c# xml 参数配置表的使用

使用简介 实际使用界面 配置表管理界面 进入 using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Windows.Forms;…

关于电路的输入阻抗与输出阻抗的理解

一、输入阻抗 输入阻抗是指一个电路输入端的等效阻抗。在输入端上加上一个电压源U&#xff0c;测量输入端的电流I&#xff0c;则输入阻抗Rin就是U/I。你可以把输入端想象成一个电阻的两端&#xff0c;这个电阻的阻值&#xff0c;就是输入阻抗。 输入阻抗跟一个普通的电抗元件…

用GDB调试程序的栈帧

2023年10月17日&#xff0c;周二晚上 目录 练习GDB栈帧调试功能的程序 GDB栈帧方面的指令 调试效果 练习GDB栈帧调试功能的程序 斐波那契数列 #include <iostream>int factorial(int n) {if (n < 1) {return 1;} else {return n * factorial(n - 1);} }int main(…