微信小程序多选标签的实现（单选或者多选）

原创

于 2024-01-04 14:46:15 发布 · 1.7k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #小程序

暑假留在社团跟别人一起开发一个校园小程序，如今也基本快开发完成了，整理一下日后可能用到的小组件。

类似于上图，下方的待选项为一个组件，根据父组件传入传入的参数决定是否为多选。
父组件的HTML代码如下

<view class="my-tag">
  <view class="tag-des" >
    <text>个人标签</text>
    <text 
      class="tips-text" 
      wx:if="{
  
  { !alreadyselect }}">可多选</text>
    <view 
      wx:else="{
  
  { alreadyselect }}"
      class="selected-my-tag">
      <block
        wx:for="{
  
  { SelectMyTag }}"
        wx:key="index"
        >
        <view>{
  
  { item.type }}</view>
      </block>
    </view>
  </view>
  
  <Tag bindonClickSelectTypeMulit='SelectMyTags' tags="{
  
  { MyTagsList }}"/>
  <view style='height:30rpx;'></view>
</view>

接下来是CSS样式。