Utilisez Uniapp pour implémenter la fonction de sélection de ville

L'utilisation d'uniapp pour implémenter la fonction de sélection de ville nécessite des exemples de code spécifiques

Avec le développement rapide de l'Internet mobile, la demande des gens pour des fonctions de sélection de ville pratiques augmente également. Cette fonction peut être facilement implémentée à l'aide d'uniapp. Un exemple de code spécifique est donné ci-dessous.

Tout d'abord, nous devons préparer un composant de sélection de ville. Dans uniapp, nous pouvons utiliser le composant Picker selector pour implémenter la fonction de sélection de ville. Ajoutez le code suivant au modèle :

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

Dans la section script, nous devons définir les données de la ville et la ville sélectionnée par défaut. Vous pouvez ajouter le code suivant aux données :

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

Comme vous pouvez le voir, nous avons défini un tableau bidimensionnel city de données urbaines, où chaque dimension représente un niveau de sélection. Par exemple, la première dimension représente les provinces, la deuxième dimension représente les zones urbaines et la troisième dimension représente des rues spécifiques. La ville que nous sélectionnons par défaut est defaultCity, et nous utilisons la méthode onChange pour mettre à jour la ville sélectionnée et l'imprimer.

Enfin, embellissez notre sélecteur de villes en ajoutant des styles. Ajoutez le code suivant avec style :

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

Le code ci-dessus définit le style du conteneur et du sélecteur, rendant le sélecteur de ville plus beau.

Grâce à l'exemple de code ci-dessus, nous avons implémenté avec succès une fonction simple de sélection de ville à l'aide d'uniapp. Bien entendu, les données de la ville peuvent être modifiées en fonction des besoins réels, comme par exemple l'obtention dynamique des données de la ville depuis l'interface. Espérons que cet exemple vous aidera à implémenter une fonctionnalité de sélection de ville plus complexe.

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!