一. 在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" />