Vant Weapp 正在参加 2020 年度 OSC 中国开源项目评选,请投票支持!
Vant Weapp 在 2020 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
投票让它出道
已投票
授权协议: MIT
开发语言: JavaScript HTML/CSS
操作系统: 跨平台
收录时间: 2018-08-13
提 交 者: 王练

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 指数为
超过 的项目

Vant Weapp 的相关博客

安装vant-weapp 组件

一、新建小程序项目 二、打开cmd,小程序项目目录下 npm i vant-weapp -S --production 2.1 如果执行上面的代码报错了 那你就...

用vant-weapp写一个购物车

vant-weapp介绍 vant-weapp是有赞出品的,前端组件库,既然出自有赞之手,必然是尤其适合于做一个商城项目,它移植于vant-ui...

在mpvue中引用vant weapp

使用mpvue作为框架,引入第三方的ui框架 vant-weapp vant-weapp: https://github.com/youzan/vant-weapp 下载vant-weapp的资源...

Vant Weapp 1.0 正式版发布

1.0 来了 2018 年 8 月 11 日,我们发布了 Vant Weapp 的首个版本。16 个月以来,我们收到了 27 位开发者贡献的 1000 多次提交...

微信小程序引入vant Weapp组件

一.打开小程序项目,选中miniprogram,右键在“终端打开” 输入命令:npm init(记得以管理员身份运行开发工具),然后一直回...

Vant Weapp 1.0 正式版发布

1.0 来了 2018 年 8 月 11 日,我们发布了 Vant Weapp 的首个版本。16 个月以来,我们收到了 27 位开发者贡献的 1000 多次提交...

mpvue中使用vant-weapp

安装 # 通过 npm 安装 npm i vant-weapp -S --production # 通过 yarn 安装 yarn add vant-weapp --production # 直接通过...

wepy2.0中使用vant-weapp组件

npm i vant-weapp -S --production 在项目下的package.json下看是否有了vant字段 最最最重要的,在引入的时候通过module映入 ...

如何使用wepy和 vant-weapp开发小程序

这里记录一下 使用wepy框架和 vant-weapp库开发小程序 废话 不多说 wepy文档: https://tencent.github.io/wepy/document.ht...

mpvue——引入vant_weapp组件

克隆仓库 克隆后,将dist目录下的所有文件复制到项目中的/static/vant/目录下,vant目录是我自己创建为了区分的 git clone ht...

Vant Weapp 的相关问答

还没有任何问答,马上提问

评论 (3)

加载中
谢谢作者
2018/11/20 11:24
回复
举报
小程序限制:父层无法覆盖第三方组件内部的样式,组件配置参数是否丰富,是否灵活就非常重要了
2018/08/17 18:05
回复
举报
更多评论
3 评论
83 收藏
分享
返回顶部
顶部