Bagaimana untuk melaksanakan fungsi pemilihan teg dalam uniapp

Cara melaksanakan fungsi pemilihan tag dalam uniapp

Dalam pembangunan aplikasi, fungsi pemilihan tag adalah keperluan biasa. Dengan menyediakan set tag kepada pengguna, pengguna boleh memilih satu atau lebih teg untuk melaksanakan operasi pengelasan atau penapisan. Artikel ini akan memperkenalkan cara melaksanakan fungsi pemilihan teg dalam uniapp dan menyediakan contoh kod untuk rujukan.

1. Buat senarai teg
Pertama, anda perlu membuat senarai teg pada halaman untuk memaparkan teg yang boleh dipilih. Anda boleh menggunakan komponen uni-kad dan ikon uni dalam pustaka komponen uniui untuk mencantikkan kesan paparan label.

<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. Tetapkan status pemilihan teg
Untuk melaksanakan fungsi pemilihan teg, anda perlu mentakrifkan tatasusunan tag terpilih, Tag terpilih, dalam data halaman untuk menyimpan teg yang dipilih oleh pengguna. Pada masa yang sama, ia menentukan sama ada teg dipilih dalam senarai teg dan menukar gaya keadaan yang dipilih.

<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 Gunakan dan dapatkan teg yang dipilih
Paparkan teg yang dipilih pada halaman, dan hantar teg yang dipilih ke halaman seterusnya atau lakukan operasi lain melalui mekanisme acara 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>

Di atas ialah langkah dan contoh kod untuk melaksanakan fungsi pemilihan tag dalam uniapp. Melalui pelaksanaan di atas, pengguna boleh memilih teg mengikut keperluan mereka sendiri, dan pada masa yang sama, mereka boleh menggunakan teg yang dipilih untuk melaksanakan operasi lain, seperti penapisan data, dsb. Pembangun boleh menyesuaikan lagi gaya dan fungsi mengikut keperluan mereka sendiri. Saya harap artikel ini akan membantu anda melaksanakan fungsi pemilihan teg dalam uniapp.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan fungsi pemilihan teg dalam uniapp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!