2023-08-12 uview2.0与1.0版本差异对比（长期更新）

uview是uni-app官方组件，现在已经迭代到了第二个大版本，由于业务需求，要把原来的uview1.0版本升级到现在的最新版本，故有此文。

uview2.0文档地址👉：https://www.uviewui.com/components/color.html

uview1.0文档地址👉：https://v1.uviewui.com/components/color.html

uview官方也提供了一个版本差异对比文档👉https://www.uviewui.com/components/diff1.x.html,本文是我在开发中的一些总结。

以下uview2.0简写为2版本，uview1.0简写为1版本。

 

u-cell-item 单元格

1）、2版本 去掉了-item，请直接使用u-cell；

2）、1版本是通过arrow来控制右侧箭头显示否显示，2版本则改为isLink，且1版本是默认开启而2版本则默认隐藏；

 

u-grid-item 宫格

2.0里面删掉了u-grid-item-box元素，对比1版本，2版本会直观的丢失padding：30rpx 0的上下填充；

 

u-swiper 轮播图
1)、所需list数组必须是图片路径数组，比如：['https://www.baidu.com/123.png']，list数组里面不能有其他值，只能是由图片路径组成的数组；

 

u-calendar 日历

1)、2版本需要写明show，1版本使用v-model来绑定show，现在不行，新版本必须加上:show="变量"，v-model在新版本可写可不写；

2)、1版本默认是可以点击遮罩层关闭的，2版本则默认关闭而且还改了对应的属性名称，2版本要用closeOnClickOverlay='true'来控制遮罩层的点击逻辑；

3)、1版本的change事件被废弃了，改尔换之的是confirm，而且点击确定还得手动设show为false才能关闭日历（真不如原先的好用，升级了反而不好用还升级它干嘛？闲着没事干吗）；

4)、2版本的confirm返回的数据是全部的日期，如果你选择的mode是range，1版本会直接返回第一个和最后一个日期，总共就2个值，你新版改的是什么玩意，返回全部数据干嘛，闲着没事干吗？？

5)、1版本的max-date换成了2版本的maxRange；

 

u-avatar 头像

1版本是可以使用size="large || default || mini"来设置大小的，2版本文档虽然也说了能用，但是无效而且会显示异常，比如设置size="large"编译后就会变成：width: large; height: large;

==================== 如果要设置头像大小就得用2版本新增的fontSize属性？不！fontSize无效，还得用回size ====================

Bug：fontSize无论设置成多少好，比如36或者36px，它都只会显示40px的width和height，坑啊！！！！！

 

u-code-input 验证码输入

1)、1版本叫u-message-input，2版本改名叫u-code-input了；

2)、dot-fill：是否用圆点填充==》2版本dot-fill改为dot，原写法：:dot-fill="true"，现写法为直接写dot；

 

u-switch 开关选择器

1)、1版本是通过transform来控制switch的大小的（如：style="transform: scale(.8);"），2版本新增属性size，可以用这个来控制大小，如：size="20"；

 

u-popup 弹出层

1)、1版本设置显示关闭按钮:closeable="true"，然后点击是可以关掉的，不需要手动去设值，2版本多了个show属性和close方法，要你自己手动在close回调里设closeable为false才能关掉；
2)、如上，2版本你不写上show属性是无法控制它是否显示的，1版本直接用v-modal即可；

3)、我发现设置显示关闭图标:closeable="true"，然后点击关闭图标居然不关闭弹出层？？呵呵。

 

u-modal 模态框

1)、2版本新增属性show，用于判断是否弹出，对比1版本用的是v-modal='弹出变量'；

注意：close是点击遮罩层隐藏，cancel是点击取消才隐藏。

 

u-dropdown 下拉菜单

呵呵，2版本删除了该组件！！！

 

u-babbar 底部导航栏

如何修改字体图标？👇

/deep/ .u-tabbar-item__icon {
  .u-icon__icon {
    font-size: 60rpx !important;
  }
}

/deep/ .u-tabbar-item__text {
  font-size: 26rpx !important;
}

注：这是全局修改，如果不想照成样式冲突，可以在外面包一层，我也尝试过，但是无效。。