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

最新推荐文章于 2025-04-04 00:58:22 发布

lyx9904

最新推荐文章于 2025-04-04 00:58:22 发布

阅读量3.8k

点赞数 1

分类专栏：自定义组件文章标签：小程序

本文链接：https://blog.csdn.net/lyx9904/article/details/119104167

版权

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

类似于上图，下方的待选项为一个组件，根据父组件传入传入的参数决定是否为多选。
父组件的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样式。

.my-tag{
   
  width: 682rpx;
  
  border-radius: 38rpx;
  background: #fff;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.16);
  margin-top: 68rpx;
  margin-left: 34rpx;
}
.tag-des

最低0.47元/天解锁文章