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

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

类似于上图，下方的待选项为一个组件，根据父组件传入传入的参数决定是否为多选。
父组件的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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

接下来是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{
  padding-top: 34rpx ;
  margin-left: 34rpx;
  margin-right: 41rpx;
  font-weight: bold;
  font-size: 28rpx;
  border-bottom: 3rpx solid rgb(230, 230, 230);
  display: flex;
  align-items: center;
}
.tips-text{
  margin-left: 50rpx;
  color: #ADADAD;
  font-weight: normal;
  font-size: 28rpx;
}
.selected-my-tag{
  display: flex;
  flex-wrap:wrap ;
  margin-left: 50rpx;
}
.tag-des text{
  min-width: 112rpx;
}
.selected-my-tag view{
  margin-left: 30rpx;
  color: #ADADAD;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

父组件的JS代码

 data: {
    MyTagsList: { 
      type: [ '运动达人',"新手求带" ,"王者大佬","剧本杀爱好者","快跑偷人啦","饮茶先啦落班先"],
      multichoice: true //多选，若单选不传参或为False
     },
    alreadyselect: false,
    SelectMyTag:[],}
   //选择个人标签
   SelectMyTags(e){
    this.setData({
      SelectMyTag : e.detail.type,
      alreadyselect:true
    })
    console.log(e.detail.type);
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

子组件的代码

<view class="select-tag">
    <block>
      <view 
        wx:if="{{ !tags.multichoice }}"
        wx:for="{{ tags.type }}" 
        wx:key='index'
        data-index='{{ index }}'
        class="my-tag  {{ selected == index ? 'selected':'' }}"
        bindtap="onClickSelectType"
      >{{ item }}</view>
      <view 
        wx:if="{{ tags.multichoice }}"
        wx:for="{{ tags.type }}" 
        wx:key='index'
        data-index='{{ index }}'
        class="my-tag  {{ TagList[index].checked ? 'selected':'' }}"
        bindtap="onClickSelectType"
      >{{ item }}</view>
    </block>
    
  </view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

.select-tag{
  margin-left: 42rpx;
  display: flex;
  font-size: 22rpx;
  line-height: 40rpx;
  display: flex;
  flex-wrap: wrap;
  margin-top: 20rpx;
}
.my-tag{
  color: #787CF9;
  min-width: 120rpx;
  padding: 0 20rpx;
  height: 40rpx;
  text-align: center;
  border-radius: 20rpx;
  background-color: #F7F3FD;
  margin-right: 30rpx;
  margin-top: 20rpx;
}
.selected{
  background-color:#9573E7 !important;
  color:white
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

// components/TeamTag/index.js
Component({
  /**
   * tags:{}
   */
  properties: {
    CurrentSelected: {
      type:Number,
      value:0,
      observer:function(newvalue){
        this.setData({
          selected:newvalue
        })
      }
    },
    tags: {
      type: Object,
      value:{
       type: ['学习局','运动局','游戏局','其他']
      },
      multichoice: false //不能多选
    }
  },

  /**
   * 组件的初始数据
   */
  data: { 
    selected:0,
    AlreadySelected:[ ],
    TagList:[]
  },
  lifetimes:{
    attached(){
      const NewTypeArr =[]
      if(this.properties.tags.multichoice){
        this.properties.tags.type.forEach(item => {
          NewTypeArr.push({type:item,checked:false})
        })
        this.setData({
          TagList:NewTypeArr
        })
        
      }
    }
  },
  /**
   * 组件的方法列表
   */
  methods: {
    onClickSelectType(e){
      const {index} = e.currentTarget.dataset
      //console.log(index);
      //判断是否为多选
      if(this.properties.tags.multichoice==true){
        let SelectArr = this.data.AlreadySelected
        let taglist = this.data.TagList
        //判断是否选中
        let isselected = SelectArr.findIndex(item => this.properties.tags.type[index]==item.type)
      //  console.log(isselected);
        //已经选中，重复点击更改为未选中的状态
        if(isselected!=-1) {         
          SelectArr.splice(isselected,1);
          taglist[index].checked=false
          this.setData({
            selected:index,
            AlreadySelected:[].concat(SelectArr),
            TagList: [].concat(taglist)
          })
        }
        else{
          SelectArr.push({ type:this.properties.tags.type[index],id:index })
          taglist[index].checked=true
          this.setData({
            selected:index,
            AlreadySelected:[].concat(SelectArr),
            TagList: [].concat(taglist)
          })
        }
        //console.log(this.data.AlreadySelected);
        //选中的标签
        this.triggerEvent("onClickSelectTypeMulit",{type:this.data.AlreadySelected})
      }
      else{
        this.setData({
          selected:index
        })
        this.triggerEvent("onClickSelectType",{index,type:this.properties.tags.type[index]})
      }
     
     
    },
  }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95