uni-app 选择更多城市

在uni-app中实现“选择更多城市”的功能，你可以使用uni-app的组件库和API来实现城市列表的展示和选择。以下是一个简化的代码示例，展示了如何实现这一功能。

1. 安装依赖

首先，确保你已经安装了uni-app的基础环境，并创建了一个uni-app项目。如果你还没有安装uni-app CLI，可以通过以下命令安装：

npm install -g @dcloudio/uni-cli

2. 数据准备

你可以使用一个JSON文件或者从API获取城市数据。以下是一个简单的城市数据示例：

[
  {"name": "北京", "code": "110000"},
  {"name": "上海", "code": "310000"},
  {"name": "广州", "code": "440100"},
  // 更多城市数据...
]

3. 页面布局

在pages/index/index.vue中，你可以使用<list>和<picker>组件来展示和选择城市。

<template>
  <view>
    <picker mode="selector" :range="cityList" @change="bindPickerChange">
      <view class="picker">
        当前选择：{{selectedCity}}
      </view>
    </picker>
    <button @click="showMoreCities">选择更多城市</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      cityList: [
        {name: "北京", code: "110000"},
        {name: "上海", code: "310000"},
        {name: "广州", code: "440100"}
      ],
      selectedCityIndex: 0,
      selectedCity: ""
    };
  },
  methods: {
    bindPickerChange(e) {
      this.selectedCityIndex = e.mp.detail.value;
      this.selectedCity = this.cityList[this.selectedCityIndex].name;
    },
    showMoreCities() {
      // 这里可以跳转到另一个页面，展示所有城市列表，并选择后返回
      uni.navigateTo({
        url: '/pages/cityList/cityList?selectedCityIndex=' + this.selectedCityIndex
      });
    }
  },
  mounted() {
    this.selectedCity = this.cityList[this.selectedCityIndex].name;
  }
};
</script>

<style>
.picker {
  padding: 20px;
}
</style>

4. 城市列表页面

在pages/cityList/cityList.vue中，你可以实现一个完整的城市列表页面，并允许用户选择后返回。

<!-- 此处省略了具体实现，可参考uni-app官方文档中的列表和页面跳转示例 -->

以上代码提供了一个基本的框架，你可以根据实际需求进一步扩展和完善，比如添加搜索功能、分页加载等。希望这个示例能帮助你实现“选择更多城市”的功能。