微信小程序 vant-weapp 实现多选标签

最新推荐文章于 2026-05-20 08:44:37 发布

原创

最新推荐文章于 2026-05-20 08:44:37 发布 · 1.9k 阅读

收录于

多选标签效果

在这里插入图片描述

配置 vant-weapp

步骤见：https://jessieeeeee.xyz/2020/08/12/vantweapp-install/

demo.json

记得在 json 文件中引用 vant-weapp 的 tag 组件：

{
   
   
  "usingComponents": {
   
   
    "van-tag": "@vant/weapp/tag/index"
  }
}

demo.wxml

在 wxml 文件中搭建页面基础结构：

<!--pages/demo/demo.wxml-->

<view>
  <view class="tagSelector">
    <view class="hot-search-tag">
      <block wx:for="{
    
    { hotTag }}" wx:key="{
    
    { index }}">
        <van-tag round color="{
    
    { item.active?selectColor:tagBgColor }}" text-color="#333333" size="large" bindtap=