当前位置: 首页> 健康> 知识 > 微信小程序-Vant组件库的使用

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

时间:2025/7/9 16:24:56来源:https://blog.csdn.net/weixin_42284031/article/details/141003270 浏览次数:0次

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

在这里插入图片描述

关键字:微信小程序-Vant组件库的使用

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: