Bagaimana untuk melaksanakan fungsi pemilihan wilayah dan bandar dalam uniapp

uni-app ialah rangka kerja pembangunan merentas platform berdasarkan Vue.js Kami selalunya perlu melaksanakan fungsi memilih wilayah dan bandar semasa pembangunan. Artikel ini akan memperkenalkan cara menggunakan beberapa komponen dan pemalam apl uni untuk merealisasikan fungsi pemilihan wilayah dan bandar.

Pertama, kita perlu menyediakan sumber data untuk wilayah dan bandar. Sumber data yang biasa digunakan boleh berupa fail JSON atau diperoleh daripada API bahagian belakang. Di sini kami menunjukkannya dalam bentuk fail JSON.

1. Buat fail JSON
   Kami mencipta fail data.json untuk menyimpan data wilayah dan bandar. Kandungannya adalah seperti berikut:

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

2. Struktur halaman
   Kami membuat borang pemilihan wilayah dan bandar di halaman, kodnya adalah seperti berikut:

<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. Logik halaman
   Kami melaksanakan pembacaan data wilayah dan bandar dalam fail JS halaman Dan logik pemilihan, kodnya adalah seperti berikut:

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

Di atas adalah contoh kod cara melaksanakan fungsi pemilihan wilayah dan bandar melalui aplikasi uni. Dengan menggunakan komponen pemilih uni-app, kami boleh mengemas kini pilihan bandar dan daerah secara dinamik berdasarkan wilayah yang dipilih. Gunakan wx.request untuk meminta sumber data dalam fail JS halaman, dan kemudian mengemas kini pilihan bandar dan daerah secara dinamik berdasarkan wilayah yang dipilih.

Semoga contoh ini dapat membantu anda melaksanakan fungsi memilih wilayah dan bandar dalam apl uni. Sudah tentu, dalam pembangunan sebenar, anda mungkin perlu membuat perubahan dan pengoptimuman mengikut keperluan anda sendiri. Saya harap artikel ini dapat memberi anda beberapa idea dan bantuan.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan fungsi pemilihan wilayah dan bandar dalam uniapp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!