Comment implémenter la fonction de sélection de balises dans Uniapp-uni-app-php.cn

Comment implémenter la fonction de sélection de balises dans Uniapp

王林

Libérer： 2023-07-09 16:17:12

original

1962 Les gens l'ont consulté

Comment implémenter la fonction de sélection de balises dans uniapp

Dans le développement d'applications, la fonction de sélection de balises est une exigence courante. En fournissant à l'utilisateur un ensemble de balises, l'utilisateur peut sélectionner une ou plusieurs balises pour effectuer des opérations de classification ou de filtrage. Cet article expliquera comment implémenter la fonction de sélection de balises dans uniapp et fournira des exemples de code pour référence.

1. Créer une liste de balises
Tout d'abord, vous devez créer une liste de balises sur la page pour afficher les balises sélectionnables. Vous pouvez utiliser le composant uni-card et les uni-icons dans la bibliothèque de composants uniui pour embellir l'effet d'affichage des étiquettes.

<template>
  <view class="tag-list">
    <uni-card v-for="(tag, index) in tagList" :key="index" @click="selectTag(tag)">
      <view class="tag-item">{{tag}}</view>
    </uni-card>
  </view>
</template>

Copier après la connexion

2. Définir le statut de sélection des balises
Afin d'implémenter la fonction de sélection de balises, vous devez définir un tableau de balises sélectionnées, selectedTags, dans les données de la page pour stocker les balises sélectionnées par l'utilisateur. En même temps, il détermine si l'étiquette est sélectionnée dans la liste des étiquettes et change le style de l'état sélectionné.

<template>
  <view class="tag-list">
    <uni-card v-for="(tag, index) in tagList" :key="index" @click="selectTag(tag)">
      <view class="tag-item" :class="{ 'tag-selected': isSelected(tag) }">{{tag}}</view>
    </uni-card>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tagList: ['标签1', '标签2', '标签3', '标签4', '标签5'],
      selectedTags: []
    }
  },
  methods: {
    selectTag(tag) {
      const index = this.selectedTags.indexOf(tag)
      if (index > -1) {
        this.selectedTags.splice(index, 1)
      } else {
        this.selectedTags.push(tag)
      }
    },
    isSelected(tag) {
      return this.selectedTags.indexOf(tag) > -1
    }
  }
}
</script>

<style>
.tag-item {
  padding: 10rpx;
  margin: 5rpx;
  border-radius: 20rpx;
  background-color: #eee;
  text-align: center;
  font-size: 28rpx;
  color: #333;
}

.tag-selected {
  background-color: #f60;
  color: #fff;
}
</style>

Copier après la connexion

3. Appliquez et obtenez la balise sélectionnée
Affichez la balise sélectionnée sur la page et transmettez la balise sélectionnée à la page suivante ou effectuez d'autres opérations via le mécanisme d'événements d'uniapp.

<template>
  <view>
    <view class="selected-tags">
      <view v-for="(tag, index) in selectedTags" :key="index" class="selected-tag">{{tag}}</view>
    </view>
    <view class="tag-list">
      <uni-card v-for="(tag, index) in tagList" :key="index" @click="selectTag(tag)">
        <view class="tag-item" :class="{ 'tag-selected': isSelected(tag) }">{{tag}}</view>
      </uni-card>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tagList: ['标签1', '标签2', '标签3', '标签4', '标签5'],
      selectedTags: []
    }
  },
  methods: {
    selectTag(tag) {
      const index = this.selectedTags.indexOf(tag)
      if (index > -1) {
        this.selectedTags.splice(index, 1)
      } else {
        this.selectedTags.push(tag)
      }
    },
    isSelected(tag) {
      return this.selectedTags.indexOf(tag) > -1
    }
  }
}
</script>

<style>
.selected-tags {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20rpx;
  padding: 10rpx;
}

.selected-tag {
  padding: 10rpx;
  margin: 5rpx;
  border: 1px solid #666;
  border-radius: 20rpx;
  background-color: #eee;
  text-align: center;
  font-size: 28rpx;
  color: #333;
}

.tag-item {
  padding: 10rpx;
  margin: 5rpx;
  border-radius: 20rpx;
  background-color: #eee;
  text-align: center;
  font-size: 28rpx;
  color: #333;
}

.tag-selected {
  background-color: #f60;
  color: #fff;
}
</style>

Copier après la connexion

Ce qui précède sont les étapes et les exemples de code pour implémenter la fonction de sélection de balises dans uniapp. Grâce à l'implémentation ci-dessus, les utilisateurs peuvent sélectionner des balises en fonction de leurs propres besoins, et en même temps, ils peuvent appliquer les balises sélectionnées pour effectuer d'autres opérations, telles que le filtrage des données, etc. Les développeurs peuvent personnaliser davantage les styles et les fonctions en fonction de leurs propres besoins. J'espère que cet article vous aidera à implémenter la fonction de sélection de balises dans uniapp.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!