Vant Weapp 正在参加 2020 年度 OSC 中国开源项目评选,请投票支持!
Vant Weapp 在 2020 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
投票让它出道
已投票
Vant Weapp 获得 2020 年度 OSC 中国开源项目评选「最佳人气项目」 !
Vant Weapp 获得 2020 年度 OSC 中国开源项目评选「最佳人气项目」「最积极运营项目」 !
Vant Weapp 获得 2020 年度 OSC 中国开源项目评选「最积极运营项目」 !

软件简介

Vant Weapp 是有赞移动端组件库 Vant 的小程序版本,两者基于相同的视觉规范,提供一致的 API 接口,助力开发者快速搭建小程序应用。

预览

扫描下方小程序二维码,体验组件库示例:

内置样式

Vant 中默认包含了一些常用样式,可以直接通过 className 的方式使用。

使用指南

在 app.wxss 中引入内置样式

@import "path/to/vant-weapp/dist/common/index.wxss";

 

文字省略

当文本内容长度超过容器最大宽度时,自动省略多余的文本。

<view class="van-ellipsis">这是一段宽度限制 250px 的文字,后面的内容会省略</view>

 

1px 边框

为元素添加 Retina 屏幕下的 1px 边框(即 hairline),基于伪类 transform 实现。

<!-- 上边框 -->
<view class="van-hairline--top"></view>

<!-- 下边框 -->
<view class="van-hairline--bottom"></view>

<!-- 左边框 -->
<view class="van-hairline--left"></view>

<!-- 右边框 -->
<view class="van-hairline--right"></view>

<!-- 上下边框 -->
<view class="van-hairline--top-bottom"></view>

<!-- 全边框 -->
<view class="van-hairline--surround"></view>
展开阅读全文

代码

的 Gitee 指数为
超过 的项目

评论 (3)

加载中
谢谢作者
2018/11/20 11:24
回复
举报
小程序限制:父层无法覆盖第三方组件内部的样式,组件配置参数是否丰富,是否灵活就非常重要了
2018/08/17 18:05
回复
举报
更多评论
发表于大前端专区
2019/04/25 07:09

Vant Weapp 0.5.11 发布,有赞小程序 UI 组件库

Vant Weapp 0.5.11 发布了,Vant Weapp 是有赞移动端组件库 Vant 的小程序版本,两者基于相同的视觉规范,提供一致的 API 接口,助力开发者快速搭建小程序应用。 新版更新内容如下: Bug 修复 Area: 修复同步设置areaList时不显示选项 #1556 Slider: 修复拖拽同时设置 value 时拖拽失效 #1553 Collapse: 修复 collapse-item 销毁时未从 collapse 中注销 #1517 Improvements Icon: 升级 @vant/icons 至1.1.6 #1560 DatetimePicke...

0
8
发表于大前端专区
2019/04/04 06:40

Vant Weapp 0.5.9 发布,有赞小程序 UI 组件库

Vant Weapp 0.5.9 发布了,Vant Weapp 是有赞移动端组件库 Vant 的小程序版本,两者基于相同的视觉规范,提供一致的 API 接口,助力开发者快速搭建小程序应用。 新版更新内容如下: Improvements 输出es5构建 #1485 Stepper: 新增 input-width 属性 #1480 Checkbox: 修复文档示例错误 #1479 Notify: 新增 safe-area-inset-top 属性 #1478 Popup: 新增 safe-area-inset-top 属性 #1478 Navbar: 新增 safe-area-inset-top 属性 #1...

0
5
发表于大前端专区
2019/03/24 06:52

Vant Weapp 0.5.8 发布,有赞小程序 UI 组件库

Vant Weapp 0.5.8 发布了,Vant Weapp 是有赞移动端组件库 Vant 的小程序版本,两者基于相同的视觉规范,提供一致的 API 接口,助力开发者快速搭建小程序应用。 新版更新内容如下: Improvements Stepper: 样式更新 #1424 Collapse: 新增 border 属性 #1408 CellGroup: 新增 title 属性 #1407 Search: 样式更新 #1396 Search: 新增 label、shape 属性 #1396 Search: 新增 slot label #1396 Popup: 添加 transitionEnd 事件 #134...

0
8
发表于大前端专区
2019/02/27 07:21

Vant Weapp 0.5.5 发布,有赞小程序 UI 组件库

Vant Weapp 0.5.5 发布了,Vant Weapp 是有赞移动端组件库 Vant 的小程序版本,两者基于相同的视觉规范,提供一致的 API 接口,助力开发者快速搭建小程序应用。 新版更新内容如下: Improvements Transition: 实现由 animation 重构为 transition #1341 Transition: 支持通过外部样式类自定义过渡效果 #1341 Transition: 支持 duration 传入对象来定制进入和移出的持续时间 #1341 Popup: 支持 duration 传入对象来定制进入和移出...

8
9
发表于大前端专区
2018/12/23 07:17

Vant Weapp 0.4.10 发布,有赞小程序 UI 组件库

Vant Weapp 0.4.10 更新内容: Improvements Card: 更新样式 #1085 Card: 更新 thumb-mode 默认值为 aspectFit #1039 Field: 新增 show-confirm-bar 属性 #1040 TreeSelect: 更新样式 #1084 TreeSelect: 支持左侧选项禁用 #1084 TreeSelect: 增加外部样式类 #1084 Picker: 新增选择器组件 #1083 Tag: 新增 text-color 属性 #1077 Collapse: 更新 content 样式 #1069 Checkbox: 更新禁用态 label 颜色 #1068 Checkbox: 优化渲染性...

0
9
发表于大前端专区
2018/12/04 07:46

Vant Weapp 0.4.8 发布,有赞小程序 UI 组件库

Vant Weapp 0.4.8 更新内容: Improvements Icon: 增加更多基础图标 #980 Icon: 支持传入图片链接作为图标展示 #973 Tab: 新增 animated 属性 #957 Field: 新增 left-icon 插槽 #962 Field: 新增 focus、blur 事件回调参数 #956 Field: 新增 adjust-position、confirm-hold 属性 #955 NavBar: 新增 border 属性 #960 Dialog: 新增 transition 属性 #990 Rate: 新增 icon、void-icon 属性 #961 文档:支持在线预览组件效果 #967...

0
13
发表于大前端专区
2018/10/10 07:37

Vant Weapp 0.3.8 发布,有赞小程序 UI 组件库

Vant Weapp 0.3.8 更新内容: Improvements Tab: 样式升级 #719 Badge: 样式升级 #718 Dialog: 样式升级 #717 TreeSelect: 适配 ipad #715 Card: 新增 lazyLoad 属性 #707 Bug Fixes 修复 Cell 边框在部分情况下无法展示的问题 #714 修复 Stepper 在 ipad 下高度错误的问题 #716 修复 Stepper disabled 状态下仍然可以点击的问题 #709 Vant Weapp 是有赞移动端组件库 Vant 的小程序版本,两者基于相同的视觉规范,提供一致的 AP...

0
4
发表于大前端专区
2018/10/09 07:46

Vant Weapp 0.3.7 发布,有赞小程序 UI 组件库

Vant Weapp 0.3.7 更新内容: Improvements Button: 优化禁用状态样式 #702 Button: 新增 round 属性 #704 Card: 新增 tag 属性 #705 Card: 新增 link-type 属性 #706 Card: 新增 thumb-link 属性 #706 Checkbox: 支持在原生 form 组件内使用 #694 Radio: 支持在原生 form 组件内使用 #694 Tab:新增 z-index 属性 #695 NoticeBar: 优化样式 #699 Vant Weapp 是有赞移动端组件库 Vant 的小程序版本,两者基于相同的视觉规范,提...

0
3
发表于大前端专区
2018/09/14 07:27

Vant Weapp 0.3.2 发布,有赞小程序 UI 组件库

Vant Weapp 0.3.2 更新内容: Improvements Dialog: 新增弹出动画 #548 Dialog: 更新按钮色值 #543 Dialog: 新增 z-index 属性 #573 Popup: 新增 z-index 属性 #572 Toast: 新增 z-index 属性 #571 Badge: 性能优化 #546 Tabbar: 性能优化 #547 调整组件边框色值 #554 Bug Fixes 修复 Badge active 属性不生效的问题 #569 修复 Tab color 属性会改变未激活标签的颜色的问题 #570 修复 Field 展示清除按钮时导致输入框高度变化的...

0
6
发表于大前端专区
2018/09/09 07:30

Vant Weapp 0.3.1 发布,有赞小程序 UI 组件库

Vant Weapp 是有赞移动端组件库 Vant 的小程序版本,两者基于相同的视觉规范,提供一致的 API 接口,助力开发者快速搭建小程序应用。 Vant Weapp 0.3.1 是一个小的 bug 修复版本,主要修复内置样式无法引入的问题 #535 。 源码下载: Source code(zip) Source code(tar.gz)

0
7
发表于大前端专区
2018/09/08 07:25

Vant Weapp 0.3.0 发布,有赞小程序 UI 组件库

Vant Weapp 是有赞移动端组件库 Vant 的小程序版本,两者基于相同的视觉规范,提供一致的 API 接口,助力开发者快速搭建小程序应用。 Vant Weapp 0.3.0 更新日志: Breaking changes Actionsheet: 重命名为 ActionSheet #514 Toast: 修改组件引入路径,避免编辑器报错的问题 #524 组件统一使用 ES module 进行模块引用 #499 Improvements 新增 Tab 标签页组件 #496 新增 Dialog 对话框组件 #496 优化 Popup 动画,支持退场动画 ...

0
5
发表于大前端专区
2018/09/01 07:05

Vant Weapp 0.2.1 发布,轻量可靠的小程序 UI 组件库

Vant Weapp 是有赞移动端组件库 Vant 的小程序版本,两者基于相同的视觉规范,提供一致的 API 接口,助力开发者快速搭建小程序应用。 Vant Weapp 0.2.1 更新日志: 改进 新增 Progress 进度条组件 #459 Field:增加 title-width 属性 #482 Search: 支持在原生 form 组件内使用 #480 Switch: 支持在原生 form 组件内使用 #478 Stepper: 支持在原生 form 组件内使用 #477 SwitchCell: 支持在原生 form 组件内使用 #479 Field: 优化...

0
6
发表于大前端专区
2018/08/14 07:43

Vant Weapp 0.1.0 发布,轻量可靠的小程序 UI 组件库

Vant Weapp 是有赞移动端组件库 Vant 的小程序版本,两者基于相同的视觉规范,提供一致的 API 接口,助力开发者快速搭建小程序应用。 Vant Weapp 0.1.0 更新日志: Breaking changes 统一采用 click 作为点击事件名 Improvements 新增 Utils 工具方法 优化文档对事件名的描述 Bug Fixes 修复 Card 金额为 0 时无法展示的问题 源码下载: Source code (zip) Source code (tar.gz)...

2
9
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
发表于大前端专区
2020/06/04 09:42

安装vant-weapp 组件

#### 一、新建小程序项目 #### 二、打开cmd,小程序项目目录下 > npm i vant-weapp -S --production 2.1 如果执行上面的代码报错了 ![](https://oscimg.oschina.net/oscnet/up-04aa1c8f36a9cf5689c7eb44e45bb98cb87.png) 那你就执行一下:npm init -y 微信开发工具里面就会出现:package.json这样就解决问题了 2.2 接着就可以执行:npm i vant-weapp -S --production ![](https://oscimg.oschina.net/oscnet/up-0c3a01a2858a3ba...

0
0
发表于大前端专区
2020/01/16 17:16

用vant-weapp写一个购物车

# vant-weapp介绍 vant-weapp是有赞出品的,前端组件库,既然出自有赞之手,必然是尤其适合于做一个商城项目,它移植于vant-ui,后者有的特性大部分都已经实现。vant-ui找了好久,都没有发现购物车业务组件,我就从自家的有赞精选这个小程序的购物车搬一份过来。 # 参考目标页 ![有赞购物车](https://upload-images.jianshu.io/upload_images/2599324-00ead04cc24041e8.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/124...

0
0
2019/03/20 14:39

在mpvue中引用vant weapp

使用mpvue作为框架,引入第三方的ui框架 vant-weapp vant-weapp: https://github.com/youzan/vant-weapp 下载vant-weapp的资源:https://github.com/youzan/vant-weapp.git 1、 2、 3、 4、全选复制 5、进入自己的项目的static文件夹 6、新建一个vant文件夹 7、把刚才复制的所有东西,丢进去 8、项目如图: 9、单个页面中创建main.json文件 10、使用的组件名称引入 { "usingComponents": { "van-button": "/stati...

0
3
发表了博客
2019/12/11 11:37

Vant Weapp 1.0 正式版发布

## 1.0 来了 2018 年 8 月 11 日,我们发布了 [Vant Weapp][1] 的首个版本。16 个月以来,我们收到了 27 位开发者贡献的 1000 多次提交,也处理了 1200 多个 issue,发布了 50 多个版本。Github 的 star 数从 5k 上升到了 11k,长期是 Github 上 star 数最多的第三方小程序 UI 组件库。 现在,我们很高兴向大家介绍 **Vant Weapp 1.0 版本**。 经过 2 个月的开发与 beta 测试,我们为大家带来了 11 个全新的组件,重构了多个现有...

0
0
发表了博客
2020/02/03 17:07

微信小程序引入vant Weapp组件

一.打开小程序项目,选中miniprogram,右键在“终端打开” 输入命令:npm init(记得以管理员身份运行开发工具),然后一直回车,直至在miniprogram文件夹下,生成package.json文件。 二.打开官网,https://youzan.github.io/vant-weapp/#/intro 通过npm安装,执行以下命令 1:npm install --production 2: npm i @vant/weapp -S --production 三.构建 npm 包 打开微信开发者工具,点击 工具 -> 构建 npm,并点击详情,勾选 使...

0
0
发表了博客
2019/04/10 10:10

Vant Weapp 1.0 正式版发布

1.0 来了 2018 年 8 月 11 日,我们发布了 Vant Weapp 的首个版本。16 个月以来,我们收到了 27 位开发者贡献的 1000 多次提交,也处理了 1200 多个 issue,发布了 50 多个版本。Github 的 star 数从 5k 上升到了 11k,长期是 Github 上 star 数最多的第三方小程序 UI 组件库。 <img src="https://img.yzcdn.cn/public_files/2019/12/05/7b13ce2b7ae72258f05ee4cc1772016c.jpg" style="zoom:25%;" /> 现在,我们很高兴向大家介绍...

0
0
发表了博客
2019/07/30 20:04

mpvue中使用vant-weapp

安装 # 通过 npm 安装 npm i vant-weapp -S --production # 通过 yarn 安装 yarn add vant-weapp --production # 直接通过 git 下载 Vant Weapp 源代码,并将dist或lib目录拷贝到自己的项目中 git clone https://github.com/youzan/vant-weapp.git 引入 // 以下方法使用于git下载安装的方法 // 全局引入 app.json "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#fff", ...

0
0
发表了博客
2020/11/29 11:11

记录mpvue+vant-weapp的使用(一):安装配置使用,引入vant-weapp

2020-8-7前来更新------------------------------------------- 放上成品,可以参考参考: 之前用vue用的比较习惯,比较喜欢里面的组件式开发,能少写一些复用的代码,于是尝试一下美团的mpvue来开发小程序。 官网:http://mpvue.com/mpvue/quickstart.html 部署教程官网里面的就可以了。 然后,mpvue只是提供了代码编辑的框架而已,里面的组件之类需要第三方的组件库,我看到基本上用的vant-weapp的比较多,于是也打算尝试一下...

0
0
发表了博客
2019/02/22 15:57

mpvue——引入vant_weapp组件

克隆仓库 克隆后,将dist目录下的所有文件复制到项目中的/static/vant/目录下,vant目录是我自己创建为了区分的 git clone https://github.com/youzan/vant-weapp.git 注意:一定要确保复制完全了,我当时复制的时候common文件夹没复制过来,就出现错误了! 引入 直接在用的页面的main.json中引用了,这里的配置是根据我的目录结构来的,如果你和我前面的操作一致,那么直接复制粘贴就可以了,不然就要自己修改哦~ https://youzan.gith...

0
0
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
暂无内容
3 评论
185 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部