So implementieren Sie die Tag-Auswahlfunktion in Uniapp

So implementieren Sie die Tag-Auswahlfunktion in uniapp

In der Anwendungsentwicklung ist die Tag-Auswahlfunktion eine häufige Anforderung. Durch die Bereitstellung einer Reihe von Tags für den Benutzer kann der Benutzer eines oder mehrere der Tags auswählen, um Klassifizierungs- oder Filtervorgänge durchzuführen. In diesem Artikel wird die Implementierung der Tag-Auswahlfunktion in uniapp vorgestellt und Codebeispiele als Referenz bereitgestellt.

1. Erstellen Sie eine Tag-Liste
Zuerst müssen Sie eine Tag-Liste auf der Seite erstellen, um auswählbare Tags anzuzeigen. Sie können die Uni-Card-Komponente und Uni-Icons in der Uniui-Komponentenbibliothek verwenden, um den Anzeigeeffekt von Etiketten zu verschönern.

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

2. Tag-Auswahlstatus festlegen
Um die Tag-Auswahlfunktion zu implementieren, müssen Sie in den Daten der Seite ein Array ausgewählter Tags, selectedTags, definieren, um die vom Benutzer ausgewählten Tags zu speichern. Gleichzeitig wird bestimmt, ob die Beschriftung in der Beschriftungsliste ausgewählt ist, und der Stil des ausgewählten Status geändert.

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

3. Anwenden und das ausgewählte Tag abrufen
Zeigen Sie das ausgewählte Tag auf der Seite an und übergeben Sie das ausgewählte Tag an die nächste Seite oder führen Sie andere Vorgänge über den Ereignismechanismus von uniapp aus.

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

Das Obige sind die Schritte und Codebeispiele zum Implementieren der Tag-Auswahlfunktion in Uniapp. Durch die obige Implementierung können Benutzer Tags entsprechend ihren eigenen Anforderungen auswählen und gleichzeitig die ausgewählten Tags anwenden, um andere Vorgänge wie Datenfilterung usw. durchzuführen. Entwickler können Stile und Funktionen weiter an ihre eigenen Bedürfnisse anpassen. Ich hoffe, dieser Artikel hilft Ihnen bei der Implementierung der Tag-Auswahlfunktion in Uniapp.

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Tag-Auswahlfunktion in Uniapp. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!