Uniapp 中标签选择功能的实现方法

在 Uniapp 开发中，标签选择功能是一个常见且实用的交互需求，它能为用户提供便捷的筛选和分类操作。下面将详细介绍在 Uniapp 里实现标签选择功能的具体方法。

我们需要在页面的模板部分构建标签的展示样式。可以使用 <view> 标签结合 v-for 指令来循环渲染标签列表。例如：

<view class="tag-list">
  <view v-for="(tag, index) in tagList" :key="index" class="tag-item" :class="{active: selectedTags.includes(tag)}" @click="toggleTag(tag)">{{tag}}</view>
</view>

这里的 tagList 是存储所有标签的数组，selectedTags 用于记录当前被选中的标签，toggleTag 方法则是用于处理标签的点击事件。

接着，在脚本部分定义数据和方法。在 data 中初始化 tagList 和 selectedTags：

data() {
  return {
    tagList: ['标签1', '标签2', '标签3'],
    selectedTags: []
  }
},

然后编写 toggleTag 方法：

methods: {
  toggleTag(tag) {
    const index = this.selectedTags.indexOf(tag);
    if (index === -1) {
      this.selectedTags.push(tag);
    } else {
      this.selectedTags.splice(index, 1);
    }
  }
}

上述代码实现了点击标签时，将其添加到 selectedTags 数组中，再次点击则从数组中移除的功能。

如果希望实现一些更复杂的逻辑，比如限制选中标签的数量，可以在 toggleTag 方法中添加相应的判断：

methods: {
  toggleTag(tag) {
    if (this.selectedTags.length >= 3) {
      return;
    }
    const index = this.selectedTags.indexOf(tag);
    if (index === -1) {
      this.selectedTags.push(tag);
    } else {
      this.selectedTags.splice(index, 1);
    }
  }
}

最后，通过样式来美化标签的显示效果。可以根据 active 类名来设置选中和未选中状态的不同样式，如背景颜色、边框等：

.tag-list {
  display: flex;
  flex-wrap: wrap;
}
.tag-item {
  padding: 5px 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin: 5px;
  cursor: pointer;
}
.tag-item.active {
  background-color: #007AFF;
  color: #fff;
}

通过以上步骤，就能在 Uniapp 中轻松实现一个功能完善且美观的标签选择功能，满足项目中的各种交互需求。