uniappにタグ選択機能を実装する方法

uniapp でタグ選択機能を実装する方法

アプリケーション開発では、タグ選択機能は一般的な要件です。ユーザーにタグのセットを提供することにより、ユーザーは 1 つ以上のタグを選択して分類またはフィルタリング操作を実行できます。この記事では、uniapp でタグ選択機能を実装する方法と、参考となるコード例を紹介します。

1. タグ リストを作成する
まず、選択可能なタグを表示するために、ページ上にタグ リストを作成する必要があります。 uniui コンポーネント ライブラリの uni-card コンポーネントと uni-icons を使用して、ラベルの表示効果を美しくすることができます。

<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. タグ選択ステータスの設定
タグ選択機能を実装するには、ユーザーが選択したタグを保存するために、ページのデータ内で選択されたタグの配列 selectedTags を定義する必要があります。同時にタグリストでタグが選択されているかどうかを判断し、選択状態のスタイルを切り替えます。

<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. 選択したタグを適用して取得する
選択したタグをページ上に表示し、選択したタグを次のページに渡したり、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>

上記は、uniapp でタグ選択機能を実装する手順とコード例です。上記の実装により、ユーザーは自分のニーズに応じてタグを選択できると同時に、選択したタグを適用してデータ フィルタリングなどの他の操作を実行することができます。開発者は、独自のニーズに応じてスタイルと機能をさらにカスタマイズできます。この記事がuniappにタグ選択機能を実装する一助になれば幸いです。

以上がuniappにタグ選択機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。