Comment implémenter la fonction de sélection de ville dans Uniapp

uniapp (Universal App) est un framework de développement multiplateforme basé sur Vue.js qui peut être utilisé pour développer simultanément des applications iOS, Android et Web. L'implémentation de la fonction de sélection de ville dans uniapp est une exigence courante. Cet article présentera comment implémenter cette fonction dans uniapp et joindra des exemples de code correspondants.

Tout d'abord, nous devons créer une nouvelle page dans le projet uniapp, nommée city-selector.

Ensuite, dans le modèle de page du sélecteur de ville, nous pouvons utiliser le composant Picker officiellement fourni par uni-app pour implémenter le sélecteur de ville. Le composant Picker peut obtenir un effet de sélection par défilement et est très approprié pour la sélection de villes.

Voici l'exemple de code :

<template>
  <view>
    <picker v-model="selectedCity" range="{{cityList}}" @change="onChangeCity"></picker>
  </view>
</template>

Dans la section script, nous devons définir la liste des villes et la ville sélectionnée. Vous pouvez définir un tableau cityList dans data pour stocker la liste des villes et utiliser selectedCity comme ville sélectionnée.

Voici un exemple de code :

<script>
export default {
  data() {
    return {
      cityList: ['北京', '上海', '广州', '深圳'],
      selectedCity: ''
    }
  },
  methods: {
    onChangeCity(event) {
      this.selectedCity = this.cityList[event.detail.value]
    }
  }
}
</script>

Dans le code ci-dessus, selectedCity est lié dans les deux sens via les composants v-model et Picker. Lorsque la valeur du sélecteur change, la méthode onChangeCity est déclenchée, qui stocke la ville sélectionnée dans selectedCity.

Enfin, nous devons utiliser ce composant dans la page de sélection de ville, ajouter un bouton dans App.vue et accéder à la page de sélection de ville lorsque vous cliquez sur le bouton.

Voici un exemple de code :

<template>
  <view>
    <button @click="gotoCitySelector">选择城市</button>
  </view>
</template>

<script>
export default {
  methods: {
    gotoCitySelector() {
      uni.navigateTo({
        url: '/pages/city-selector/city-selector'
      })
    }
  }
}
</script>

Dans le code ci-dessus, la fonction de saut de page est implémentée via la méthode uni.navigateTo pour accéder à la page de sélection de ville.

Avec l'exemple de code ci-dessus, nous pouvons voir comment implémenter la fonctionnalité de sélection de ville dans uniapp. Grâce au composant Picker et à la liaison de données associée, nous pouvons implémenter un sélecteur de ville simple et pratique. L'utilisation du sélecteur dans le projet peut être personnalisée selon les besoins. J'espère que cet article pourra être utile à votre travail de développement.

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!