uniapp 城市选择器

Uni-App提供了两种不同的城市选择器组件：`uni-data-picker`和`wangding-pickerAddress`。

`uni-data-picker`是一个选择类的datacom组件，支持多列级联选择。使用示例可以参考引用中的代码。该组件需要在页面中引入并注册，然后可以直接在模板中使用。

`wangding-pickerAddress`是一个Uni-App插件市场中的组件，可以直接在HBuilder X中导入并使用。使用示例可以参考引用中的代码。该组件不需要引入和注册，可以直接在页面中使用。

根据您的需求和实际情况，您可以选择其中一个组件来实现Uni-App的城市选择器功能。<span class="em">1</span><span class="em">2</span>

相关问题

uniapp封装一个城市选择器

好的，以下是基于uniapp的城市选择器封装代码：

1. 在components文件夹下新建一个CityPicker文件夹，里面新建CityPicker.vue文件：

<template>
  <div class="city-picker">
    <van-picker
      :columns="columns"
      @change="onChange"
      @confirm="onConfirm"
      @cancel="onCancel"
    >
      <template #title>
        <div class="city-picker-header">
          <van-icon name="arrow-left" size="20" @click="onCancel" />
          <span class="city-picker-title">{{title}}</span>
        </div>
      </template>
    </van-picker>
  </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
  props: {
    title: {
      type: String,
      default: '选择城市'
    },
    visible: {
      type: Boolean,
      default: false
    },
    value: {
      type: Array,
      default() {
        return [null, null, null];
      }
    }
  },
  computed: mapState({
    cityData: state => state.city.cityData
  }),
  data() {
    return {
      columns: [
        {
          values: []
        },
        {
          values: []
        },
        {
          values: []
        }
      ],
      currentProvince: '',
      currentCity: '',
      currentDistrict: ''
    };
  },
  methods: {
    initColumns() {
      const { columns } = this;
      const provinceList = Object.keys(this.cityData);
      const province = this.currentProvince || provinceList[0];
      const city = this.currentCity || Object.keys(this.cityData[province])[0];
      const district = this.currentDistrict || this.cityData[province][city][0];
      columns[0].values = provinceList;
      columns[1].values = Object.keys(this.cityData[province]);
      columns[2].values = this.cityData[province][city];
      columns.forEach(column => {
        column.defaultIndex = 0;
      });
      this.currentProvince = province;
      this.currentCity = city;
      this.currentDistrict = district;
    },
    onChange(picker, value) {
      const { cityData, columns } = this;
      const province = columns[0].values[value[0]];
      const city = columns[1].values[value[1]];
      const district = columns[2].values[value[2]];
      if (cityData[province][city].indexOf(district) === -1) {
        columns[2].values = cityData[province][city];
      }
    },
    onConfirm() {
      this.$emit('input', [
        this.currentProvince,
        this.currentCity,
        this.currentDistrict
      ]);
      this.$emit('confirm', [
        this.currentProvince,
        this.currentCity,
        this.currentDistrict
      ]);
    },
    onCancel() {
      this.$emit('cancel');
    }
  },
  watch: {
    visible(val) {
      if (val) {
        this.initColumns();
      }
    },
    columns: {
      deep: true,
      handler(val) {
        const { cityData } = this;
        const province = val[0].values[val[0].defaultIndex];
        const city = val[1].values[val[1].defaultIndex];
        const district = val[2].values[val[2].defaultIndex];
        if (cityData[province][city].indexOf(district) === -1) {
          val[2].values = cityData[province][city];
          this.currentDistrict = cityData[province][city][0];
        }
        this.currentProvince = province;
        this.currentCity = city;
        this.currentDistrict = district;
      }
    }
  }
};
</script>

<style scoped>
.city-picker {
  height: 300px;
  overflow: hidden;
}

.city-picker-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
}

.city-picker-title {
  font-weight: bold;
  font-size: 16px;
}
</style>

2. 在store文件夹下新建一个city.js文件，里面写入城市数据：

export default {
  state: {
    cityData: {
      北京市: {
        北京市: [
          '东城区',
          '西城区',
          '崇文区',
          '宣武区',
          '朝阳区',
          '丰台区',
          '石景山区',
          '海淀区',
          '门头沟区',
          '房山区',
          '通州区',
          '顺义区',
          '昌平区',
          '大兴区',
          '怀柔区',
          '平谷区',
          '密云县',
          '延庆县'
        ]
      },
      天津市: {
        天津市: [
          '和平区',
          '河东区',
          '河西区',
          '南开区',
          '河北区',
          '红桥区',
          '塘沽区',
          '汉沽区',
          '大港区',
          '东丽区',
          '西青区',
          '津南区',
          '北辰区',
          '武清区',
          '宝坻区',
          '宁河县',
          '静海县',
          '蓟县'
        ]
      },
      河北省: {
        石家庄市: [
          '长安区',
          '桥东区',
          '桥西区',
          '新华区',
          '井陉矿区',
          '裕华区',
          '井陉县',
          '正定县',
          '栾城县',
          '行唐县',
          '灵寿县',
          '高邑县',
          '深泽县',
          '赞皇县',
          '无极县',
          '平山县',
          '元氏县',
          '赵县',
          '辛集市',
          '藁城市',
          '晋州市',
          '新乐市',
          '鹿泉市'
        ],
        唐山市: [
          '路南区',
          '路北区',
          '古冶区',
          '开平区',
          '丰南区',
          '丰润区',
          '滦县',
          '滦南县',
          '乐亭县',
          '迁西县',
          '玉田县',
          '唐海县',
          '遵化市',
          '迁安市'
        ],
        秦皇岛市: [
          '海港区',
          '山海关区',
          '北戴河区',
          '青龙满族自治县',
          '昌黎县',
          '抚宁县',
          '卢龙县'
        ]
      },
      山西省: {
        太原市: [
          '小店区',
          '迎泽区',
          '杏花岭区',
          '尖草坪区',
          '万柏林区',
          '晋源区',
          '清徐县',
          '阳曲县',
          '娄烦县',
          '古交市'
        ],
        大同市: [
          '城区',
          '矿区',
          '南郊区',
          '新荣区',
          '阳高县',
          '天镇县',
          '广灵县',
          '灵丘县',
          '浑源县',
          '左云县',
          '大同县'
        ],
        阳泉市: ['城区', '矿区', '郊区', '平定县', '盂县']
      }
    }
  }
};

3. 在pages文件夹下新建一个Index.vue文件，在里面调用CityPicker组件：

<template>
  <div class="container">
    <van-field
      v-model="value"
      label="城市"
      placeholder="请选择城市"
      readonly
      @click="showPicker"
    />
    <city-picker
      :visible.sync="show"
      :value.sync="value"
      @confirm="onConfirm"
      @cancel="onCancel"
    />
  </div>
</template>

<script>
import CityPicker from '@/components/CityPicker/CityPicker';
export default {
  components: {
    CityPicker
  },
  data() {
    return {
      show: false,
      value: [null, null, null]
    };
  },
  methods: {
    showPicker() {
      this.show = true;
    },
    onConfirm(value) {
      this.value = value;
      this.show = false;
    },
    onCancel() {
      this.show = false;
    }
  }
};
</script>

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

这样一个封装好的城市选择器组件就完成了。可以根据自己的需要进行样式和功能的调整。

uniapp 二级选择器

在 uniapp 中可以使用 `uni-picker-view` 组件来实现二级选择器的功能。下面是一个示例代码：

<template>
  <view class="content">
    <uni-picker-view :value="value" @change="onChange">
      <uni-picker-view-column v-for="(item, index) in columns" :key="index">
        <view class="picker-item" v-for="(subItem, subIndex) in item" :key="subIndex">
          {{ subItem }}
        </view>
      </uni-picker-view-column>
    </uni-picker-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        ['北京市', '上海市', '广州市', '深圳市'],
        ['东城区', '西城区', '朝阳区', '海淀区', '丰台区', '石景山区', '通州区', '昌平区', '大兴区', '房山区', '门头沟区', '顺义区', '平谷区', '怀柔区', '密云区', '延庆区']
      ],
      value: [0, 0]
    }
  },
  methods: {
    onChange(e) {
      this.value = e.detail.value;
      console.log('选择的值：', this.columns[0][this.value[0]], this.columns[1][this.value[1]]);
    }
  }
}
</script>

在上面的示例代码中，`columns` 数组定义了两列数据，分别是城市和区县。`value` 数组表示当前选择的值，初始值为选择第一列第一个选项。`uni-picker-view` 组件中嵌套 `uni-picker-view-column` 组件，用来渲染每一列的选项。在 `onChange` 方法中，可以通过 `this.value` 数组获取当前选择的值，进而得到选择的城市和区县。