微信小程序之标签多选效果，取消多选，wxs判断是否包含元素，标签添加删除

幽幽靖

于 2020-06-17 14:44:17 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏：微信小程序

本文链接：https://blog.csdn.net/ws19900201/article/details/106806048

本文介绍了如何在微信小程序中创建多选标签的效果，包括取消多选操作，使用WXS（微信小程序的脚本语言）进行元素判断，并详细讲解了标签的添加与删除过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图：
在这里插入图片描述

	<wxs module="m1">
        var baohan = function(loupanlistact,index) {
          var boo;
          var index = loupanlistact.indexOf(index)
          if (index <0){
            boo = false;
          }else{
            boo = true;
          }          
          return boo;       
        }
        module.exports.baohan = baohan;
    </wxs>
	<view class="selconbox">
        <view class="seltit">客户标签</view>
        <view class="selulbox">
          <view class="selli {
    
    {m1.baohan(kehutapact,index) ? 'selact' : ''}}"
                wx:for="{
    
    {kehutaparr}}" 
                  wx:key="id" 
                  data-index="{
    
    {index}}"
                  data-tagid="{
    
    {item.id}}"
                  bindtap="kehutiptap">
            <text class="tagtxt">{
  
  {item.tag}}</text>
            <image src="../../images/lpsel-xx.png" 
                    mode="widthFix" 
                    class="khgsdel"
                    wx:if="{
    
    {isdeltag}}" />
          </view>
          <block wx:if="{
    
    {zywxid == ''}}">
            <view class