nativeui的popver位置调整(气泡对话框)

扫码添加渲大师小管家，免费领取渲染插件、素材、模型、教程合集大礼包！

大家好，今天来介绍nativeui的popver位置调整(element loop)的问题，以下是渲大师小编对此问题的归纳和整理，感兴趣的来一起看看吧！

7、控件系列之气泡弹出框/弹出式气泡/Popover

Popover（气泡弹出框/弹出式气泡/气泡）是由一个矩形和三角箭头组成的弹出窗口，箭头指向的地方通常是导致Popover弹出的控件或区域。通过点击Popover内的按钮或非Popover的屏幕其他区域可关闭Popover。

点击某控件或区域弹出Popover后，Popover出现在使其触发的控件附近，箭头的指向很好的表达了Popover和触发控件的潜在关系，用户的注意力能马上被吸引过来。而且把手指或鼠标指针从触发控件移动到Popover的距离很近，操作非常顺手、效率高。

常见用法

1.快捷导航：移动设备屏幕空间有限搜余，有时不能把很多低频但非常重要的功能直接呈现在屏幕上。将多个快捷功能入口收纳到Popover中，通过“更多”、“加号”图标触发Popover，是国内主流App常见的做法。

2.情境下的相关选项：如果界面中有多个条目，而且每个条目都有多个相关选项，使用Popover承载多个情境下的相关选项是个不错的方案。在手机上，相比于Action Sheet，Popover的三角箭头能明确的指示当前操作的是哪个条目，不易出错。Popover显示区域较小呈现的选项有限，为了防止误操作不建议在Popover里启用滚动，如果选项很多，建议使用Action Sheet。

需要注意的是，在屏幕边缘需要转换Popover的方向，例如在屏幕顶部，Popover应当显示在触发位置的下方，否则Popover会超出屏幕导致显示不完整。

3.提示引导：Popover的三角箭头这一独特特性，同样适合作为提示引导或者展示附属信息。每当上线新功能，用Popover能很好的吸引用户注意力，引导用户了解新功能。界面图形较多的情况下，用Popover简短的展示附属文字信息，能帮助用户很好的理解图形的含义。

4.临时视图：在iPad等大屏幕设备上，Popover可作为完成某个任务的临时视图。此时Popover就像是一个大容器，可将导航栏、标签页（Tabs）、输入框、表格或者工具栏等等包含其中。建议实时保存Popover中的状态，以防因误点非Popover的其他区域关闭Popover，导致Popover中的修改结果前功尽弃。

iOS规范对Popover用途的限定： iOS的规范中限定Popover只能作为临时视图在iPad中使用，不能用在iPhone上租漏猛。（弊桥详见 https://developer ）实际上，早在移动互联网诞生之前，Popover作为快捷导航或者提示引导就在PC和Web里被广泛运用。只要把握好Popover的特性，跨平台使用Popover并没有什么问题。

Android平台类似Popover的控件

1.Material design中Contextual menus（情境菜单，详见 https://material ）和Popover用法类似，除了没有三角箭头指示触发区域外，另一个不同是Contextual menus会根据App的当前状态，来动态调整菜单选项的数量，例如文本选择，文本编辑类App有全选、剪贴、复制和粘贴三个选项，但是在网页选中文本只有复制一个选项，因为此时不能剪贴和粘贴。

2.在App bar点击“更多”图标展开的菜单被称为Overflow menu（溢出菜单），App bar图标太多放不下，其他图标从App bar“溢出”到“更多”里去了，是个比较形象的命名。

3.Popover和Tooltips：Tooltips（工具提示/文字提示）是鼠标hover（悬停）或者触摸长按（Material design规范有，但在移动端Tooltips不常见）在某元素上，出现的对此元素的附加解释。有时Tooltips样式是一个矩形，有时候是一个Popover。Popover是从样式上命名的控件，Tooltips是根据其用途命名的控件，两者不冲突。

4.Popover和Word balloons的区别：Word balloons（Speech balloons/speech bubbles/dialogue balloons/文字气泡/对话气泡/聊天气泡）是漫画或者聊天App中表示人物说话内容的图形，其三角箭头指向说话的人物。Word balloons通常是界面内的图形元素，而Popover是浮于界面上方的弹出窗口。两者样式相似，但是界面层级和用途有所区别。

elementui解决elpopover的边界重新计算元素位置的问题

在项目中会遇到使用el-popover但是却不想要原生的边亮链界重新计算元素的位置，比如：郑信

当浏览器滚轮向下

如果我不想要有自动重新计算元素的位置，怎么办呢？

1、解决问题的第一步当然是去element上去看官方文档了

浏览popover组件的Attributes后我发现了这喊键轮个popper-options属性

进到popper.js里面，用chrome翻译一下

找到了可以控制改组件行为的属性 boundariesElement，默认‘viewport‘是可视部分为边界，我这里改为‘body’

这样这个问题就解决了

2、如果官方文档还是不能帮助你解决问题

百度和github可以帮到你，翻墙的同学可以去stackoverflow逛逛

mui适用场景说明能不能在普通浏览器里使用能否用于wap网站

为解决HTML5在低端Android机上的性能缺陷，mui引入信坦了原生加速，其中最关键的就是webview控件渣正，因此mui若要发挥其全部能力，需和5+ App配合适用，若脱离5+ App，mui功能会受限，主要涉及三个部分：
一、webview窗口相关
涉及webview的，除了5+App，其它所有手机浏览器及PC浏览器均无法使用，涉及功能点包括：
webview模式窗体动画

创建子窗口（除了为解决区域滚动的常见双webview场景，还涉及webview模式的选项卡等多webview场景）

webview模式的侧滑菜单（也有div方式侧滑菜单）

webview模式的tab选项卡（也有div方式选项卡）

nativeUI，如原生的警告框、确认框、popover、actionsheet、toast。这些也有HTML5的实现。

预加载

自定义事件

二、第三方扩展插件
涉及webview的，除了5+App，其它所有手机浏览器及PC浏览器均无法使用，目前主要包括：语音输入；
三、Touch事件相关（注意pc浏览器没有touch事件）
Touch事件相关的，手机端浏览器均可使用、pc端chrome模拟手机浏览器也可以正常使用。
但普通PC端浏览器因为没有touch事件，可以显示控件但滑动操作功能会受限；涉及功能点包括：
手势事件

mui封装的tap相关处理业务：折叠面板、如坦悔二级列表、二级选项卡；

mui封装的swipe、drag相关处理业务：图片轮播、可左右滑动的图文表格、可左右滑动的9宫格、滑动触发列表项菜单、可拖动式侧滑菜单、下拉刷新和上拉加载、可拖动式选项卡

【备注】：在PC端，大家将tap替换成click，将HTML5默认的Drag事件替换mui 的swipe和drag，就可以解决如上两个问题。
除上述列出的功能点，其它mui功能，均可以在其它手机浏览器及PC服务端使用，所有CSS均不受影响。

plusnativeuiactionsheet样式怎么改

自定义UIActionSheet的思路就是写一个继承了UIActionSheet的类，然后重笑禅写里面的layoutSubviews函数。我写的自定义的布局就是在上方有一个navgationbar的区域，里面有左右两胡尘个按钮碰做尘和一个title。下方是一个自定义区域。

gta5nativeui怎么打开

换个安装包重装下试试，不行的话，说明系统有问题了，直接换个验证过的系统盘重装系统就行了，这样就可以全程自动、顺利解决win7系统中游戏软件无法正常运行的问题了。用u盘或者硬盘这些都是可以的，且安装速度非常快。具体安装方法如下：1、樱宽U盘安装：用ultraiso软件，打开下载好的系统安装盘文件（ISO文件），执行“写入映像文件”把U盘插到电脑上，点击“确定”，等待程序执行完毕后，这样就做好了启动及安装系统用的u盘，用这个做好的系统u盘引导启动机器后，即可顺利重装系统了；2、硬盘安装：前提是，需要有一个可以正常运行的Windows系统，提取下载的ISO文件中的“*.GHO”和“安装系统.EXE”脊斗亮到电脑的非系统分区，然销培后运行“安装系统.EXE”，直接回车确认还原操作，再次确认执行自动安装操作(执行前注意备份C盘重要资料)；