微信小程序-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"
  }
1
2
3
4
5

可以查看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
2
3
4
5
6
7
8

效果图：

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

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

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

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

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

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