微信小程序使用Vant

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

开发者工具创建的项目，miniprogramRoot 默认为 miniprogram，packagejson 在其外部，npm 构建无法正常工作。需要手动在 projectconfigjson 内添加如下配置，使开发者工具可以正确索引到 npm 依赖的位置。

打开微信开发者工具，点击  工具 -> 构建 npm ，并勾选  使用 npm 模块  选项，构建完成后，

到 全局配置 appjson 中注册引入组件，详见 快速上手 。

支持default、primary、info、warning、danger五种类型，默认为default。  格式：

通过plain属性将按钮设置为朴素按钮

设置hairline属性可以开启 05px 边框，基于伪类实现。

通过disabled属性来禁用按钮，此时按钮的bind:click事件不会触发。

通过loading属性来设置加载按钮   loading-type="spinner"   loading-text="加载中"

通过icon属性设置按钮图标，支持 Icon 组件里的所有图标，也可以传入图标 URL。

label     输入框左侧文本

type    可设置为任意原生类型, 如 number   idcard    textarea    digit

readonly  是否只读

custom-style    自定义样式

autosize    是否自适应内容高度，只对 textarea 有效，可传入对象,如 { maxHeight: 100, minHeight: 50 }，单位为px

show :是否显示 

onClose 点击其他位置，关闭d出层

position            可以设置为top、bottom、left、right。

Picker 选择器 需要配合d出层使用

<van-picker columns="{{ columns }}" bind:change="onChange" />

columns 对象数组，配置每一列显示的数据

onChange（e）    有默认参数 e 

value-key    选项对象中，文字对应的 key 通常用于对象数组

show-toolbar    是否显示顶部栏

defaultIndex     初始选中项的索引，默认为 0  不是双向绑定 需要自己改变defaultIndex  的值  需要渲染两次

vant 很多组件带自定义样式custom-class，方便使用者修改或者扩展。

本文以vant-cell修改背景色为例，说明自定义属性的使用。

xml引入vant-cell

原始效果如下图

xml申明custom-class属性

wxss实现具体的样式

效果如下图，背景色样式已经被修改了，

于是我在服务器端把索引数组中的key和value用个循环分离出来，再存入新数组中。如图

[plain] view plain copy

{

a : 'a_value',

b : 'b_value'

}

改为

[plain] view plain copy

{

keys : [a, b],

values : ['a_value', 'b_value']

}

然后就可以用picker显示了，而且keys数组和values数组的index是对应的，如果想取出原来的索引只需要values[index]即可，

mode 属性：

默认值：scaleToFill —- 不保持纵横比例缩放，使的宽高完全拉伸至填满image标签

aspectFit —- 保持纵横比例缩放，使的长边能够完全显示出来，也就说可以完整的显示出来

aspectFill —– 保持纵横比例缩放，只保证的短边能够完全显示出来，也就是说，通常只在水平或垂直方向是完整的，另一个方向将会发生截取

top —- 不缩放，只显示的顶部区域

bottom —- 不缩放，只显示的底部区域

center —- 不缩放，只显示的中间区域

left —- 不缩放,只显示的左边区域

right —– 不缩放，只显示的右边区域

top left —- 不缩放,只显示的左上边区域

top right —- 不缩放,只显示的右上边区域

bottom left —- 不缩放,只显示的左下边区域

bottom right —- 不缩放,只显示的右下边区域

4隐藏NavigationBar

5VM11106:1 Do not have login handler in current page: pages/login/login Please make sure that login handler has been defined in pages/login/login, or pages/login/login has been added into appjson

解决方案：

2调整appjson中Pages里面的页面注册顺序 ；

3检查wxml中bindtap是否在js里面将方法创建。

6switch样式大小调整

大家都知道微信官方提供的switch 能改变color 但是改变大小 常用的width height 不起作用

但是可以这样修改

7input 不沾满屏幕右侧有留白

使用flex布局的时候明明 input style 设置了flex＝1 的属性 可是input还是站不满整个屏幕的宽度，右侧有留白，文字被遮挡， 不知道是不是一个bug，

解决方案： 在input外面包一层view style设置flex＝1 用于沾满整个屏幕 input用于显示文字

————————————————

1display取值

2float(取值：left，right，none，inherit。)

3clear：该属性指出不允许有浮动对象的边。（取值：left，right，both，none）

4visibility：是否显示对象(取值：visible，hidden，collapse。)

5overflow：处理溢出内容的方式。(取值：visible，hidden，scroll，auto。)

其他属性：

以上就是关于微信小程序使用Vant全部的内容，包括:微信小程序使用Vant、微信小程序之vant组件自定义样式（外部样式）、微信小程序的picker组件不能使用对象该怎么解决等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！