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个属性:如图所示:
uni-app里的拓展组件uni ui与UI框架uView UI的Popup 弹出层的区别!_第1张图片
uView ui的官网上提供的属性有很多,如图所示:
uni-app里的拓展组件uni ui与UI框架uView UI的Popup 弹出层的区别!_第2张图片
uni-app里的拓展组件uni ui与UI框架uView UI的Popup 弹出层的区别!_第3张图片

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参数就是来解决这个高度跟宽度问题的!!!

暂时整理这么多,后续再更!!

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

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

你可能感兴趣的:(前端,App,html,uni-app,uni-ui,uView,app)