微信小程序使用vant组件

准备工作

在跟路径下创建一个lib文件把vant文件放入
在这里插入图片描述

Jeson文件中引入
 "usingComponents": {
    
    
    "van-tab": "../../lib/vant/tab",
    "van-tabs": "../../lib/vant/tabs",
    "van-field": "../../lib/vant/field",
    "van-button": "../../lib/vant/button"
  }
HTML文件中引入

根据自己需求使用

	<van-tab title="手机号登录">
		<van-cell-group>
			<van-field model:value="{
    
    {phone}}" left-icon="phone-o" label="手机号" required placeholder="请输入手机号" />
			<van-field model:value="{
    
    {username}}" left-icon="manager-o" password label="密码" border="{
    
    { false }}" placeholder="请输入密码" required />
		</van-cell-group>
取消导航栏

在Jeson文件中

{
    
    
  "usingComponents": {
    
    },
  "navigationStyle":"custom"
}

在这里插入图片描述
详情参考 https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html.

猜你喜欢

转载自blog.csdn.net/weixin_49866029/article/details/108220344