小程序使用 vant 快速创建页面

vant UI 组件库是有赞前端团队开发的一个 Vue 组件库，提供了一整套的 UI 基础组件和业务组件，通过 vant 可以快速搭建出风格统一的页面。

官方地址：vant UI 组件库

安装

1. 安装 vant 组件库：

npm i @vant/weapp -S --production

2. 修改 app.json

将 app.json 中的 "style": "v2" 去除，小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。

3. 本地设置勾选 npm 模块。

勾选 npm模块.png

4. 构建 npm

工具 -> 构建 npm

使用

1. 相应 json 页面引入组件

  "usingComponents": {
    "van-circle": "@vant/weapp/circle/index"
  }

2. 使用

<van-circle value="{{ 30 }}" text="text" />

效果：

van-circle.png

使用 vant 内置样式

内置样式：https://vant-contrib.gitee.io/vant-weapp/#/common

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

1. app.wxss 中引入

@import 'miniprogram_npm/@vant/weapp/common/index.wxss';

2. 使用

<!-- 单行超出省略 -->
<view class="van-ellipsis" style="width:100px">
  这是一段宽度限制 250px 的文字，后面的内容会省略。
</view>

<!-- 最多显示两行 -->
<view class="van-multi-ellipsis--l2">
  这是一段最多显示两行的文字，后面的内容会省略。
</view>

<!-- 最多显示三行 -->
<view class="van-multi-ellipsis--l3">
  这是一段最多显示三行的文字，后面的内容会省略。
</view>

添加1px 边框，为元素添加 Retina 屏幕下的 1px 边框（即 hairline），基于伪类 transform 实现。如果不是基于伪类实现的，则我们在添加的 1px 边框在 Retina 下默认是 2px 。

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