Vant Weapp輕量可靠的小程序 UI 組件庫

Vant Weapp 是有贊移動(dòng)端組件庫 Vant 的小程序版本，兩者基于相同的視覺規(guī)范，提供一致的 API 接口，助力開發(fā)者快速搭建小程序應(yīng)用。

預(yù)覽

掃描下方小程序二維碼，體驗(yàn)組件庫示例：

內(nèi)置樣式

Vant 中默認(rèn)包含了一些常用樣式，可以直接通過 className 的方式使用。

使用指南

在 app.wxss 中引入內(nèi)置樣式

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

文字省略

當(dāng)文本內(nèi)容長度超過容器最大寬度時(shí)，自動(dòng)省略多余的文本。

<view class="van-ellipsis">這是一段寬度限制 250px 的文字，后面的內(nèi)容會(huì)省略</view>

1px 邊框

為元素添加 Retina 屏幕下的 1px 邊框（即 hairline），基于偽類 transform 實(shí)現(xiàn)。

<!-- 上邊框 -->
<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>