uniappを使用して都市セレクター機能を実装する

uniapp を使用して都市セレクター機能を実装するには、特定のコード例が必要です

モバイル インターネットの急速な発展に伴い、便利な都市セレクター機能に対する人々の需要も高まっています。もっともっと高く来てください。この機能はuniappを利用することで簡単に実装できますので、具体的なコード例を以下に示します。

まず、都市セレクター コンポーネントを準備する必要があります。 uniapp では、ピッカー セレクター コンポーネントを使用して都市セレクター機能を実装できます。次のコードをテンプレートに追加します。

<template>
  <view class="container">
    <picker mode="multiSelector" :value="defaultCity" @change="onChange">
      <view class="picker">
        {{city[0][defaultCity[0]]}}-{{city[1][defaultCity[1]]}}-{{city[2][defaultCity[2]]}}
      </view>
    </picker>
  </view>
</template>

スクリプト セクションでは、都市データとデフォルトで選択されている都市を定義する必要があります。次のコードをデータに追加できます。

<script>
export default {
  data() {
    return {
      defaultCity: [0, 0, 0], // 默认选中城市
      city: [['北京市', '上海市', '广州市', '深圳市'], ['朝阳区', '徐汇区', '天河区', '福田区'], ['三里屯', '淮海路', '天河城', '华强北']]
    }
  },
  methods: {
    onChange(e) {
      this.defaultCity = e.detail.value; // 更新选择的城市
      console.log('选择的城市：', this.city[0][this.defaultCity[0]], this.city[1][this.defaultCity[1]], this.city[2][this.defaultCity[2]]);
    }
  }
}
</script>

ご覧のとおり、都市データの 2 次元配列都市を定義しました。各次元は選択レベルを表します。たとえば、最初の次元は州を表し、2 番目の次元は都市部を表し、3 番目の次元は特定の道路を表します。デフォルトで選択する都市はdefaultCityで、onChangeメソッドを使用して選択した都市を更新し、出力します。

最後に、スタイルを追加して都市セレクターを美しくします。次のコードをスタイルに追加します。

<style scoped>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.picker {
  font-size: 32rpx;
  color: #333;
  padding: 20rpx;
  background-color: #fff;
  border-radius: 10rpx;
}
</style>

上記のコードは、コンテナーとセレクターのスタイルを定義し、都市セレクターの外観をより美しくします。

上記のコード例を通じて、uniapp を使用して単純な都市セレクター関数を実装することに成功しました。もちろん、インターフェイスから都市データを動的に取得するなど、実際のニーズに応じて都市データを変更することもできます。この例が、より複雑な都市セレクター機能の実装に役立つことを願っています。

以上がuniappを使用して都市セレクター機能を実装するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。