uni-app 选择城市（城市列表选择）

在uni-app中实现城市列表的选择，可以使用picker组件，设置其mode属性为multiSelector，这样可以实现多列选择器的效果。以下是一个简单的示例：

<template>
  <view>
    <view class="picker">
      <picker mode="multiSelector" :range="cityList" @change="onChangeCity">
        <view>当前选择：{{selectedCity}}</view>
      </picker>
    </view>
  </view>
</template>
 
<script>
export default {
  data() {
    return {
      cityList: [], // 省、市、区的数组
      selectedCity: ['省份', '城市', '区/县'], // 默认选中的城市
    };
  },
  onLoad() {
    this.initCityList();
  },
  methods: {
    initCityList() {
      // 假设你有一个获取城市列表的API
      // 这里只是示例，你需要根据实际情况来获取城市列表
      const province = ['省份1', '省份2'];
      const city = {
        '省份1': ['城市1-1', '城市1-2'],
        '省份2': ['城市2-1', '城市2-2'],
      };
      const district = {
        '城市1-1': ['区/县1-1-1', '区/县1-1-2'],
        '城市1-2': ['区/县1-2-1', '区/县1-2-2'],
        '城市2-1': ['区/县2-1-1', '区/县2-1-2'],
        '城市2-2': ['区/县2-2-1', '区/县2-2-2'],
      };
      
      this.cityList = [province, city, district];
    },
    onChangeCity(e) {
      const { level, value } = e.detail;
      this.selectedCity = this.cityList.map((item, index) => {
        if (index <= level) {
          return item[value[index]];
        }
        return this.cityList[index][0];
      });
    },
  },
};
</script>
 
<style>
.picker {
  padding: 10px;
}
</style>

在这个示例中，我们使用了三级联动的城市列表，分别是省份、城市和区/县。当用户选择不同的选项时，onChangeCity 方法会更新 selectedCity 数组，显示用户当前选择的城市。

请注意，这个示例中的城市列表是硬编码的，实际应用中你需要从后端API或本地数据库获取最新的城市列表。此外，根据你的需求，可能需要进一步优化，例如添加省份、城市、区/县的级联加载逻辑等。