• npm 包名由 vant-weapp 重命名为 @vant/weapp
    • 增加十一个新组件
    • 增加数十个 API
    • 所有组件支持通过CSS自定义属性自定义样式
    • 使用env()重构iOS安全区域适配
    • 调整部分 API 命名,废除少量 API

    在 Vant Weapp 1.0 版本中,我们新增了 11 个实用的基础组件:

    • Grid 宫格,用于展示内容或进行页面导航
    • Circle 环形进度条,告知用户当前的状态和进度
    • Overaly 遮罩层,用于强调特定的页面元素,并阻止用户进行其他操作
    • Divider 分割线,区隔内容的分割线
    • Sticky 粘性布局,与 CSS 中position: sticky属性实现的效果类似
    • Skeleton 骨架屏,在待加载区域展示的占位区块,提供界面加载过程中的过渡效果
    • IndexBar 索引栏,通讯录中的字母索引栏,用于长列表快速索引
    • Uploader 文件上传,上传一个或多个文件
    • CountDown 倒计时,用于显示活动倒计时、短信验证码等
    • DropdownMenu 下拉菜单,用于列表的分类选择、筛选及排序

    微信小程序的环境是非常特殊的。不具有动态加载代码的机制,同时微信又限制了代码的主包大小和总大小。传统的基于预设的样式定制过于臃肿,不再适合微信小程序的环境。

    微信小程序自定义组件的组件模型相当于一个简化版的 ,幸运的是,小程序也支持了 CSS自定义属性 的特性。最终,我们基于CSS自定义属性设计了样式定制的方案,开发者使用灵活、方便,组件维护也更简单。

    定制主题

    1.0 版本中包含少量不兼容更新,主要是命名调整和移除个别属性。对于正在使用 0.x 版本的项目,请按照下方的列表依次检查,大部分项目可以无痛升级

    Badge

    • BadgeGroup重命名为Sidebar
    • Badge重命名为SlidebarItem
    • active属性重命名为activeKey

    Notify

    • text选项重命名为message
    • backgroundColor选项重命名为background

    Popup

    • 去除transitionend事件,新增 6 个事件

    SwitchCell

    • 移除了SwitchCell组件,可以使用CellSwitch组件代替

    Transition

    • 去除transitionend事件,新增 6 个事件

    ActionSheet

    • 新增click-overlay事件
    • 新增close-on-click-action属性
    • 新增color属性
    • 新增description属性
    • 新增round属性

    Area

    • 新增columns-placeholder属性
    • reset方法支持传入code参数

    Button

    • 新增loading-type属性
    • color属性支持渐变色
    • 切换时增加过渡效果

    Checkbox

    • 新增icon-size属性

    Color

    • 基础红色更新为#ee0a24

    DatetimePicker

    • 新增filter属性

    Dialog

    • 优化文字换行
    • 新增title插槽
    • 新增confirm-button-color属性
    • 新增cancel-button-color属性
    • 新增width属性
    • 新增overlay-style属性

    Field

    • 新增clickable属性
    • 新增arrow-direction属性
    • 新增hold-keyboard属性

    GoodsActionButton

    • 新增color属性
    • 样式升级为圆角风格

    GoodsActionIcon

    • 新增icon插槽
    • 新增dot属性

    GridItem

    • 新增info属性
    • 新增dot属性

    Icon

    • 新增down图标
    • 新增wap-hone实底风格图标
    • 支持number类型的size属性

    Loading

    • 支持number类型的size属性

    NoticeBar

    • 阻止关闭图标点击事件冒泡

    Notify

    • 新增clear方法

    Popup

    • 新增round属性
    • 新增closeable属性
    • 新增close-icon属性
    • 新增close-icon-position属性

    Progress

    • 新增属性

    Radio

    • 新增icon-size属性

    Rate

    • 优化手势判断
    • 新增gutter属性
    • 新增touchable属性
    • 支持string类型的size属性
    • 新增action-text属性
    • 新增left-icon插槽
    • 新增right-icon插槽

    SlidebarItem

    • 新增dot属性

    Slider

    • 新增drag-start事件
    • 新增drag-end事件
    • 支持传入任意范围的maxmin属性
    • 支持number类型的bar-height属性
    • 增加滑动动画
    • 增大点击区域

    SwipeCell

    • 新增name属性
    • 新增open事件
    • 支持打开状态互斥

    Switch

    • 加载图标的颜色会跟随开关状态变化

    Stepper

    • 支持长按手势
    • 新增input-width属性
    • 新增button-size属性
    • 新增decimalLength属性
    • 新增 disablePlus、disableMinus属性

    Steps

    • 新增active-icon属性
    • 新增inactive-icon属性

    Tabs

    • 使用 Sticky 组件重构吸顶实现
    • 新增name属性
    • 新增line-height属性
    • 新增ellipsis属性
    • 新增lazy-render属性
    • line-width属性支持String类型
    • 增加云开发结合示例

    TreeSelect

    • 新增属性