umicro / uview2.0

uView UI，是全面兼容nvue的uni-app生态框架，全面的组件和便捷的工具会让您信手拈来，如鱼得水

uView 2.0

多平台快速开发的UI框架

说明

uView UI，是uni-app全面兼容nvue的uni-app生态框架，全面的组件和便捷的工具会让您信手拈来，如鱼得水

官方文档：https://uviewui.com

官方1群：1042987248（已满）

官方2群：249718512（已满）

官方3群：1129077272（已满）

官方4群：1084514613（已满）

官方5群：863820668（已满）

官方6群：745721078（已满）

官方7群：627867855（已满）

官方8群：496409492（已满）

官方9群：828504448（已满）

官方10群：232041042（已满）

官方11群：364463526（已满）

官方12群：229707069（已满）

点击加13群交流反馈：879811455

特性

• 全面兼容nvue，原生渲染，高性能
• 兼容安卓，iOS，微信小程序，H5，QQ小程序，百度小程序，支付宝小程序，头条小程序
• 60+精选组件，功能丰富，多端兼容，让您快速集成，开箱即用
• 众多贴心的JS利器，让您飞镖在手，召之即来，百步穿杨
• 众多的常用页面和布局，让您专注逻辑，事半功倍
• 详尽的文档支持，现代化的演示效果
• 按需引入，精简打包体积

预览

您可以通过微信扫码，查看最佳的演示效果。

链接

• 官方文档
• 更新日志
• 升级指南
• 关于我们

交流反馈

欢迎加入我们的QQ群交流反馈：点此跳转

关于PR

我们非常乐意接受各位的优质PR，但在此之前我希望您了解uView2.0是一个需要兼容多个平台的（小程序、h5、ios app、android app）包括nvue页面、vue页面。 所以希望在您修复bug并提交之前尽可能的去这些平台测试一下兼容性。最好能携带测试截图以方便审核。非常感谢！

安装

uni-app插件市场链接 —— https://ext.dcloud.net.cn/plugin?id=1593

请通过官网安装文档了解更详细的内容

快速上手

请通过快速上手了解更详细的内容

使用方法

配置easycom规则后，自动按需引入，无需import组件，直接引用即可。

<template>
	<u-button text="按钮"></u-button>
</template>

捐赠uView的研发

uView文档内容和框架源码全部开源免费，如果您认为uView帮到了您的开发工作，您可以捐赠uView的研发工作，捐赠无门槛，哪怕是一杯可乐也好(相信这比打赏主播更有意义)。

版权信息

uView遵循MIT开源协议，意味着您无需支付任何费用，也无需授权，即可将uView应用到您的产品中。

uview2.0's Issues

u-navbar

navbar第一个示例
navbar

<u-navbar 
          title="剑未配妥，出门已是江湖" 
          left-text="返回" 
          right-text="帮助" 
          @click-left="onClickBack" 
          @click-right="onClickRight"
      ></u-navbar>

click-left,click-right应该是leftClick和rightClick

uview2.0 组件的style 不加scoped 全局css 影响 太大了

uview2.0 组件的style 不加scoped 全局css 影响 太大了

-- uview-2.0

-- uview-1.0

-- uview2.0 项目使用

Album 单张图片无法显示宽高

修改成这样才可以

`imageWidth() {

			return this.urls.length === 1 ? this.$u.addUnit(this.singleWidth) : this.$u.addUnit(this.multipleSize)
		},
		imageHeight() {
			
			return this.urls.length === 1 ? this.$u.addUnit(this.singleHeight) : this.$u.addUnit(this.multipleSize)
		},`

u-row设置gutter时, 样式表现异常，内容溢出容器，h5下u-col增加box-sizing:border-box可修复，其他平台未测试

APP中，u-popup大概率收縮時會產生閃爍

mode指定top|bottom時，
APP中大概率出現收縮後閃爍一下的情況
比如當mode為top時候，
關閉時候popup會向上收，當收完的時候會自動彈出閃爍一下再隱藏。
H5下沒有這個情況，
測試機型華為mate30p

建议加快2.0版本自定义图标功能实现

感觉1.0版本给我一个比较大的方便点就是我可以快速的从iconfont中添加图标进行使用，感谢大佬为我们带来的2.0，如果方便可否先行将自定义图标功能实现，nvue不支持可以后续再想办法嘛，不能因为nvue不支持就放弃这么好的功能。

扫了微信小程序体验二维码，感觉组件点击有延迟，总感觉卡卡的。transition动画无效果

扫了微信小程序体验二维码，感觉组件点击有延迟，总感觉卡卡的。transition动画无效果

u-modal的confirm事件不触发

平台：(h5、App)，version: 2.0.2
u-modal的confirm事件不触发

无法进入uni-modal的confirm事件

uni.requireNativePlugin is not a function

在HBuilderX中编译是正常的也打开了微信开发者工具了，但是微信开发者工具中报错了

Originally posted by @cxy-coder in #9 (comment)

vview2难让人爱起来

感觉和uview1不是一个级别的东西，文档不全，各种奇怪的问题，用它开发h5和小程序简直是给自己找麻烦，不建议大家迁移过来

u--textarea在窄屏(375px)宽度超出问题

如上图，不管label宽度怎么变，u--textarea的宽度始终是319px，仔细查找后，发现是.uni-textarea里设置了固定宽度

Picker组件cancelText及confirmText无法使用的问题

版本:2.X
组件路径:uview-ui/components/u-picker.vue
u-toolbar中没有添加
:cancelText="cancelText" :confirmText="confirmText"
属性，导致设置cancelText和confirmText时无法更改对应文字

改为
<u-toolbar v-if="showToolbar" :cancelColor="cancelColor" :confirmColor="confirmColor" :cancelText="cancelText" :confirmText="confirmText" :title="title" @cancel="cancel" @confirm="confirm" ></u-toolbar>
后，可正常设置

不存在 `uni.$u.getRect` 方法

源码中只有 this.$u.getRect 和 this.$uGetRect ，不知是文档错误还是源码没加上

全局tabbar使用方式还是和uview1一样的逻辑吗

文档里没有写，不知道如何是最佳实现方式

uview2.0的样式影响的到页面布局

使用tabbar之后 发现tabbar内部样式影响到我页面的布局。内部的几个css 影响页面

切换组件

Subsection 分段器 选中分段文字被遮挡

uView版本 ：2.0.3
平台：h5
问题： Subsection 分段器active滑块叠放顺序有问题

解决方法：当前选中的段文字被遮挡，手动加上任意大于0的z-index可显示，如下图

标签名写错了

搜索框内可以右边加图标吗

现在只有左边有图标 希望能增加右边图标😄

u-checkbox-group双向绑定有问题

u-checkbox-group双向绑定的数组,对数组进行删除子项选中状态不更新，一直处与勾选状态

getRect不支持nvue

getRect 底層是通過nodesRef.boundingClientRect的方式進行的，
但是nodesRef.boundingClientRect並不支持nvue，
建議文檔中進行說明，
另外的還有vuex，
明白工作上的強度問題，
希望不支持或不兼容的在文檔中進行說明或把對應文檔頁面先下架，後續兼容或支持後在補充。

u-upload 组件，如果图片多张，超出宽度时，不会自动换行

关于插槽判断的兼容性问题与思考

问题描述

在 uniapp 的 v3.x 的文档中，注明 APP 端不支持 $slots

意味着整个UI库的 $slots.xxx 的判断都无法生效，就会导致在 APP 端，使用自定义插槽时，组件内无法判断。

例如在 u-cell 组件中使用自定义插槽 right-icon 时，组件由于拿不到 $slots 的值，无法通过 v-if 判断显示

uView2.0/uni_modules/uview-ui/components/u-cell/u-cell.vue

Line 28 in 5fd2933

<view class="u-cell__right-icon-wrap" v-if="$slots['right-icon'] || isLink"

以上只是其中一个例子，整个库中有多个地方都有使用到 $slots.xxx，可能都会有该问题

解决思路

我在自己写组件的时候也有遇到这个问题，我目前想到两种方案

1. 添加 props 属性来注明是否使用自定义插槽

继续上个例子举例，在 props 中添加 customRightIcon 属性，在模板中替换掉 $slots.xxx 的判断

props: {
    customRightIcon: { type: Boolean, default: false } 
}

<view class="u-cell__right-icon-wrap" v-if="customRightIcon || isLink">
...
</view>

该方案的好处在于：已知的兼容性好，全平台都可兼容
该方案的坏处在于：每个需要 v-if 判断的自定义的插槽都需要定义 props，使用者每次都需要写上自定义插槽的同时，添加对应的判断 props 属性，增加使用者的心智负担，并且会使不需要兼容 APP 的开发者也需要添加自定义属性。

针对不需要兼容 APP 的方案

props 定义的判断属性，不在替换代替 $slot.xxx，而是在原有 v-if 的判断条件上添加 props 属性

<view class="u-cell__right-icon-wrap" v-if="$slots['right-icon'] || isLink || customRightIcon ">
...
</view>

需要兼容 APP 的开发者，在写插槽的同时添加上插槽对应的自定义 props 属性，否则直接写上插槽即可

2. 通过 vm.$scopedSlots 判断是否使用

根据上面 v3.x 的介绍可得，v3.x 是兼容 $scopedSlots，并且在 APP 中粗略测试后，发现在不指定 slot-scope 的情况下也能获取到传入的插槽

<!-- 业务 -->
<u-cell>
  <view>这是 default 插槽</view>
  <template #right-icon>
    <view>这是 right-icon 插槽</view>
  </template>
</u-cell>

<!-- u-cell -->
mounted() {
 console.log(this.$scopedSlots)
}

由此可在原有 v-if 判断条件基础添加 $scopedSlots.xxxx 条件，即可兼容 APP 端

该方案的问题在于：只是简单的看了一下 $scopedSlots api 拥有传入 slot，没有完整测试跨平台的兼容性。

最后

以上思路的可行性如被通过，我很乐意为此方案提交 PR！如果有更好的实现思路，欢迎留言一起探讨学习。

u-modal的文档问题

其中文档的Event事件中，确认的事件名为confirm，但是正确的调用方法是confrim，这可能拼错英语单词了

2.0 的rate组件减星操作时，点击第n颗星 总是传回第n+1颗星

2.0 的rate组件点击第n颗星 总是传回第n+1颗星，减星操作的时候可以复现。

u-tabbar微信高度设定50修改为动态获取

uview 2.0 不支持TypeScript么？

如题，没有找到TypeScript的支持。

Calendar 日历 minDate属性导致所有日期往后推了一天

Calendar 日历 写上minDate属性导致所有日期往后推了一天


原本的日期应该是这样的

h5点击popup遮罩层没退出

小程序报错e.requireNativePlugin is not a function

小程序会报错： 页面【node-modules/uview-ui/components/u-transition/u-transition]错误，注释掉：const animation = uni.requireNativePlugin('animation')就ok

checkbox修改字体问题

2.0 h5 checkbox 修改css无法修改字体大小，发现页面会自动添加font-size等属性。
难道要一个个checkbox去修改labelsize 和 labelcolor吗？不能通过css统一修改吗？如果要增加important才能修改，那岂不是会增加维护难度？

微信小程序，popup组件mode为center时，closeOnClickOverlay=true无效

微信小程序，popup组件mode为center时，closeOnClickOverlay=true无效。微信小程序扫码体验demo上就有这个问题。

u-image,u-navbar的一点建议

u-image 在ios手机中的微信小程序企业微信小程序中，因为安卓手机拍摄的照片如果手机发生了翻转，会导致ios中显示不正常，建议做一下兼容；

u-navbar的标题在安卓ios中的居中 居左的兼容希望做一下；

`u-cell` 文档介绍与源码不一致

文档中使用的是默认插槽，但 u-cell 没有默认插槽，只有与之类似的 value 插槽

call单元格u-cell-group和u-cell-item问题

2.x版本 组件里面已经没有 u-cell-item， 应该是改成使用u-cell , 官方文档cell文档描述 代码案列未修改

uform validate 不支持函数回调，只支持promise.then，文档示例错误

form表单labelWidth导致小程序页面中label宽度闪烁

labelWidth写在u--form和u-form-item上，在小程序里会产生一些不一样的效果：
写在前者上面，小程序里的label宽度一开始是窄的，而后变宽，有时候时间很短，但是明显有闪烁。写在后者就没有这种情况。
另外这个单位也不是文档里的rpx，而是px

u-date-picker mode = date时，会报错，times函数n=NaN

u-tabs

1.当tabs 定义list数组为空时，再去接口请求数据赋值list数组 下滑快会往左偏移切换tabs后则正常了
2.current 定义为2 ，tabs还是在默认0，动态切换current 也没有变化
3.name属性没有作用

nvue兼容问题 u--image

image组件在nvue中使用自定义loading和自定义error插槽无法显示

Calendar 日历 日期与星期错位

uview版本：2.0.3
平台：h5
问题：Calendar 日历组件 日期外层有padding导致与星期错位（猜测是不同平台box-sizing 的问题）

解决方式：删除padding值

button组件中文字不显示

button组件在nvue中，文字不显示

2.0.2版uni.$u.http有问题

uni.$u.http.post() 的 then 和 catch 是不是封装反了啊？？
在 async中 await uni.$u.http.post(url,data) 居然没办法往下运行，报错 Unhandled promise rejection

2.0没有dropdown吗

或者有没有类似的组件

按钮plain无边框

全屏选项卡

2.0版本 全屏选项卡 组件时被移除了吗

Calendar问题

在H5端中，mode模式为single、multiple时会出现排版错误，一排只有六个，并且当日计算的星期也是错误的，在range模式下正常

textarea 在此获取焦点的时候 会卡顿 在 ios 真机上

textarea 在此获取焦点的时候 会卡顿 在 ios 真机上

案例有属性,在API列表里却没有,比如tabs的粘性布局sticky就没有,也用不了

Subsection 分段器

Subsection 分段器 激活项层级高了一层把文字遮盖住了

u-text组件对齐方式无效