uniappに州と都市の選択機能を実装する方法

uni-app は Vue.js をベースにしたクロスプラットフォーム開発フレームワークで、開発中に州や都市を選択する機能を実装する必要がよくあります。この記事では、uni-app のコンポーネントとプラグインを使用して、州と都市の選択機能を実現する方法を紹介します。

まず、州と都市のデータ ソースを準備する必要があります。一般的に使用されるデータ ソースは、JSON ファイルであるか、バックエンド API から取得できます。ここでは、JSON ファイルの形式でそれを示します。

1. JSON ファイルの作成
   州と都市のデータを保存する data.json ファイルを作成します。コンテンツは次のとおりです:

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

2. ページ構造
   ページ上に州と都市の選択フォームを作成します。コードは次のとおりです:

<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. ページ ロジック
   ページの JS ファイルに州と市のデータを読み取って選択するロジックを実装します。コードは次のとおりです:

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

上記は方法です。 uni-appで県・市選択を実現する機能のサンプルコードです。 uni-app のピッカー コンポーネントを使用すると、選択した州に基づいて都市と地区のオプションを動的に更新できます。 wx.request を使用してページの JS ファイル内のデータ ソースをリクエストし、選択した州に基づいて都市と地区のオプションを動的に更新します。

この例が、uni-app で州と都市を選択する機能を実装するのに役立つことを願っています。もちろん、実際の開発では、必要に応じて変更や最適化を行う必要があるかもしれませんが、この記事が何らかのアイデアや助けになれば幸いです。

以上がuniappに州と都市の選択機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。