微信小程序-Vant组件库的使用

一. 在app.json里面删除style：v2

为了避免使用Vant组件库和微信小程序组件样式的相互影响

二.在app.json里面usingComponents注册Vant组件库的自定义组件

  "usingComponents": {"van-icon": "./miniprogram_npm/vant-weapp/icon/index","van-cell": "./miniprogram_npm/vant-weapp/cell/index","van-cell-group": "./miniprogram_npm/vant-weapp/cell-group/index"}

可以查看Vant组件库的介绍进行参考

三.参考文档进行Vant组件库组件的使用

<van-cell value="内容" custom-class="custom-class"><view slot="title"><view class="van-cell-text">单元格</view></view>
</van-cell>
<van-cell title="单元格" bind:click="msg"><van-icon slot="right-icon" name="search" class="custom-icon" />
</van-cell>

效果图：

分析：
1.单元格红色原因：

外部样式类设置为字体红色
custom-class=“custom-class”

.custom-class{color: red !important;
}

2.内容显示在右侧
value属性值都显示在右侧

2.插槽right-icon，显示一个自定义组件图标search

  <van-icon slot="right-icon" name="search" class="custom-icon" />