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数组里面不能有其他值,只能是由图片路径组成的数组;
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即可;
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; }
注:这是全局修改,如果不想照成样式冲突,可以在外面包一层,我也尝试过,但是无效。。