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

uni-app est un framework de développement multiplateforme basé sur Vue.js. Nous devons souvent implémenter la fonction de sélection des provinces et des villes pendant le développement. Cet article expliquera comment utiliser certains composants et plug-ins d'uni-app pour réaliser la fonction de sélection de province et de ville.

Tout d'abord, nous devons préparer une source de données pour les provinces et les villes. Les sources de données couramment utilisées peuvent être des fichiers JSON ou obtenues à partir d'API backend. Nous le démontrons ici sous la forme d’un fichier JSON.

1. Créer un fichier JSON
   Nous créons un fichier data.json pour stocker les données de la province et de la ville. Le contenu est le suivant :

{
  "provinceList": [
    {
      "name": "北京市",
      "cityList": [
        {
          "name": "北京市",
          "districtList": ["东城区", "西城区", "朝阳区", "丰台区", "石景山区", "海淀区", "门头沟区", "房山区", "通州区", "顺义区", "昌平区", "大兴区", "怀柔区", "平谷区", "密云区", "延庆区"]
        }
      ]
    },
    {
      "name": "上海市",
      "cityList": [
        {
          "name": "上海市",
          "districtList": ["黄浦区", "徐汇区", "长宁区", "静安区", "普陀区", "虹口区", "杨浦区", "闵行区", "宝山区", "嘉定区", "浦东新区", "金山区", "松江区", "青浦区", "奉贤区", "崇明区"]
        }
      ]
    },
    {
      "name": "广东省",
      "cityList": [
        {
          "name": "广州市",
          "districtList": ["荔湾区", "越秀区", "海珠区", "天河区", "白云区", "黄埔区", "番禺区", "花都区", "南沙区", "增城区", "从化区"]
        },
        {
          "name": "深圳市",
          "districtList": ["罗湖区", "福田区", "南山区", "宝安区", "龙岗区", "盐田区", "龙华区", "坪山区", "光明区", "大鹏新区"]
        }
      ]
    }
  ]
}

2. Structure de la page
   Nous créons un formulaire de sélection de province et de ville sur la page, le code est le suivant :

<template>
  <view>
    <form>
      <picker mode="selector" range="{{ province }}" bind:change="onProvinceChange">
        <view class="picker">
          {{ province[index1] }}
          <text class="iconfont icon-down"></text>
        </view>
      </picker>
      <picker mode="selector" range="{{ city }}" bind:change="onCityChange">
        <view class="picker">
          {{ city[index2] }}
          <text class="iconfont icon-down"></text>
        </view>
      </picker>
      <picker mode="selector" range="{{ district }}" bind:change="onDistrictChange">
        <view class="picker">
          {{ district[index3] }}
          <text class="iconfont icon-down"></text>
        </view>
      </picker>
    </form>
  </view>
</template>

3. Logique de la page
   Nous implémentons la lecture des données de province et de ville dans le fichier JS de la page Et la logique de sélection, le code est le suivant :

<script>
  export default {
    data() {
      return {
        province: [],
        city: [],
        district: [],
        index1: 0,
        index2: 0,
        index3: 0
      }
    },
    methods: {
      onProvinceChange(e) {
        const index = e.detail.value;
        this.setData({
          province: this.data.provinceList.map(item => item.name),
          city: this.data.provinceList[index].cityList.map(item => item.name),
          district: this.data.provinceList[index].cityList[0].districtList,
          index1: index,
          index2: 0,
          index3: 0
        });
      },
      onCityChange(e) {
        const index = e.detail.value;
        this.setData({
          district: this.data.provinceList[this.data.index1].cityList[index].districtList,
          index2: index,
          index3: 0
        });
      },
      onDistrictChange(e) {
        const index = e.detail.value;
        this.setData({
          index3: index
        });
      }
    },
    created() {
      wx.request({
        url: '/data.json',
        success: res => {
          const { provinceList } = res.data;
          this.setData({
            province: provinceList.map(item => item.name),
            city: provinceList[0].cityList.map(item => item.name),
            district: provinceList[0].cityList[0].districtList
          });
        }
      });
    }
  }
</script>

Ce ci-dessus est l'exemple de code sur la façon d'implémenter la fonction de sélection de province et de ville via uni-app. En utilisant le composant sélecteur d'uni-app, nous pouvons mettre à jour dynamiquement les options de ville et de district en fonction de la province sélectionnée. Utilisez wx.request pour demander la source de données dans le fichier JS de la page, puis mettez à jour dynamiquement les options de ville et de district en fonction de la province sélectionnée.

J'espère que cet exemple pourra vous aider à implémenter la fonction de sélection des provinces et des villes dans uni-app. Bien sûr, dans le développement réel, vous devrez peut-être apporter des modifications et des optimisations en fonction de vos propres besoins. J'espère que cet article pourra vous fournir des idées et de l'aide.

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!