uni-app里的拓展组件uni ui与UI框架uView UI的Popup 弹出层的区别！

uni-app里的拓展组件uni ui与UI框架uView UI的Popup 弹出层的区别！

文章目录

• 1.官网Popup 弹出层链接
• 2.属性不同
• 3.属性对照
• 4.弹出的方式
• 5.uView特有属性

1.官网Popup 弹出层链接

uni ui的官方地址：https://ext.dcloud.net.cn/plugin?id=329
uView ui的官方地址：http://uviewui.com/components/popup.html

2.属性不同

uni ui的官网上提供了3个属性：如图所示：

uView ui的官网上提供的属性有很多，如图所示：

3.属性对照

属性说明	uni ui	uView ui
是否开启动画	animation	zoom
弹出方式	type	mode
蒙版点击是否关闭弹窗	maskClick	mask-close-able
是否显示关闭图标	x	closeable
关闭图标的更改	x	close-icon
自定义关闭图标位置	x	close-icon-pos
弹窗圆角值	x	border-radius
…	…	…

由于太多属性了，就不一一列举了！
对于属性来讲，更多的是uView ui，因为uView ui其实可以说是对uni ui的应该补充与完善的ui。所以它所拥有的功能回比uni ui更多得多！

4.弹出的方式

再来看弹出的方式区别
uni ui的type参数：

属性名	说明
top	顶部弹出
center	居中弹出
bottom	底部弹出
message	预置样式 ：消息提示
dialog	预置样式 ：对话框
share	预置样式 ：底部弹出分享示例

uView ui的mode参数：

属性名	说明
left	左弹出
top	顶部弹出
right	右弹出
bottom	底部弹出
center	居中弹出

5.uView特有属性

控制弹窗的宽度 | 高度

内置了scroll-view元素，内如内容超出容器的高度，将会自动获得垂直滚动的特性，通过设置height参数可以设置高度
这里说的宽度，指的是左边，右边，中部弹出的场景，高度指的是顶部和底部弹出的场景(因为这两个场景宽度都是100%)。

uView提供了length来控制此种情况，此值可以是数值(单位rpx)，auto，百分比等，内部会自动处理对应的逻辑。 如果为auto的时候，表示弹窗的宽度 | 高度由内容撑开。

1.3.7版本新增width和height参数：

1.3.7版本后，优先推荐width和height参数，并且优先级会高于length，这3个参数都可以设置百分比、auto、数值(单位rpx)、或者是带px和rpx单位的字符串：

• width — 只对mode = left | center | right模式有效
• height — 只对mode = top | center | bottom模式有效

1.3.7版本后，内置了scroll-view元素，内如内容超出容器的高度，将会自动获得垂直滚动的特性，如果您因为在slot内容做了滚动的处理，而造成了 冲突的话，请移除自定义关于滚动部分的逻辑。

这个东西完美解决了uni ui的大麻烦，因为在uni ui中的popup弹出层，如果你的内容过多的话，那么你的内容就回被顶上去，就回看不到了，之前的做法是利用scroll-view元素，通过设置滚动来解决这个问题，不过这样很麻烦，而新版本的uView的width和height参数就是来解决这个高度跟宽度问题的！！！

暂时整理这么多，后续再更！！

如果有写错或者不足的地方，还请在评论区指正！！我会及时修改！！！！！！

请尊重原创，如需转载，还请注明原作者，原文链接，谢谢啦！！！