一、為什麼要引入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/zh-tw/n/309057.html
微信掃一掃 
支付寶掃一掃 