一、为什么要引入vant组件库
小程序是一种轻量级、便捷的应用形式，但是由于小程序的开发方式有所限制，很难做到与APP的特效、交互等方面完全一致。而vant是一套基于Vue.js的移动端组件库，它可以为你的小程序提供丰富的组件库，极大的提高小程序的用户体验。
详细比较我们使用vant组件库之前和使用vant组件库之后的页面效果，可以发现vant组件库提供的组件和效果可以帮助我们在小程序页面上实现很多APP的交互与特效，使得我们的小程序更加精致、简洁、易用。
我们可以通过npm安装vant组件库，引入相应的组件，加快开发并且不必担心代码冗余增加，可以提前完成一些交互设计工作，从而使开发流程更快、更流畅。
//引入vant组件库示例代码： import Vue from 'vue'; import Vant from 'vant'; import 'vant/lib/index.css'; Vue.use(Vant);
二、vant组件库提供了哪些组件
vant是一套带有完美主题UI的、开箱即用的组件库。在小程序开发中我们可以根据需要选择使用vant组件库不同的组件模块。
vant组件库提供了丰富的模块，包括导航栏、底部导航、表单、内容板块、消息模块等等，可以满足日常小程序开发的大部分需求。下面列出vant组件库一些常用的组件：
1、导航栏：NavBar
功能：本组件支持左侧/右侧/中间各自设置内容，支持标题省略和宽度自适应，可从左侧触发返回操作
2、图标：Icon
功能：提供了 font-class 与图片两种接口来进行图标的展示，支持多种尺寸、颜色、旋转角度等样式自定义
3、信息提示框：Toast
功能：弹出式提示，支持多种状态，支持自定义图标和内容，可设置展示的时长
this.$toast('提示内容');
4、下拉刷新：PullRefresh
功能：支持下拉刷新，支持自定义各阶段的提示文案、图标和 Loading 样式，支持自定义下拉触发距离
{{ text }}
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/309057.html
微信扫一扫 
支付宝扫一扫 