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

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

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

父组件的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"><blockwx: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{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;}

父组件的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);},

子组件的代码

<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>

.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}

// components/TeamTag/index.jsComponent({/*** 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.AlreadySelectedlet 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=falsethis.setData({selected:index,AlreadySelected:[].concat(SelectArr),TagList: [].concat(taglist)})}else{SelectArr.push({type:this.properties.tags.type[index],id:index })taglist[index].checked=truethis.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]})}},}})