0
点赞
收藏
分享

微信扫一扫

鸿蒙AI功能开发【hiai引擎框架-通用文字识别】 基础视觉服务

蓝莲听雨 2024-08-08 阅读 27

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

在这里插入图片描述

举报

相关推荐

0 条评论