v1.0.0

2019-12-11

主要变动

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

新组件

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

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

v1.0.0 - 图1

样式定制

在 1.0 迭代计划确定之初，我们就不断思考这样一个问题 — 该如何给用户提供动态切换主题样式的功能呢？

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

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

从 1.0 版本开始，Vant Weapp 中的所有组件都支持通过 CSS组定义属性 进行样式定制，具体使用姿势可查看相关文档

定制主题

不兼容更新

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

Badge

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

Notify

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

Popup

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

SwitchCell

  • 移除了SwitchCell组件，可以使用Cell和Switch组件代替

Transition

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

新特性

ActionSheet

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

Area

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

Button

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

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

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

Loading

  • 支持number类型的size属性

NoticeBar

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

Notify

  • 新增clear方法

Popup

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

Progress

  • 新增stroke-width属性

Radio

  • 新增icon-size属性

Rate

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

SlidebarItem

  • 新增dot属性

Slider

  • 新增drag-start事件
  • 新增drag-end事件
  • 支持传入任意范围的max和min属性
  • 支持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

  • 新增max属性
  • 新增content插槽

v1.0.0 - 图3