首页uniapp h5端如何写城市选择器

uniapp h5端如何写城市选择器

时间: 2023-08-02 22:05:04 浏览: 121

在uniapp中，你可以使用`uni-picker`组件来实现城市选择器。实现步骤如下： 1. 在 `template` 中使用 `uni-picker` 组件，设置 `mode` 为 `selector`，并绑定一个数组，例如： ```html <uni-picker mode="selector" :range="{{cityList}}" @change="onChange"> <span>{{selectedCity}}</span> </uni-picker> ``` 其中，`cityList` 为城市列表数组，`selectedCity` 为当前选择的城市，`onChange` 为选择器值改变时触发的函数。 2. 在 `script` 中定义 `cityList` 数组和 `selectedCity` 变量，并初始化数据，例如： ```javascript export default { data() { return { cityList: ['北京', '上海', '广州', '深圳', '杭州', '南京'], // 城市列表数组 selectedCity: '请选择城市' // 当前选择的城市 }; }, methods: { onChange(e) { // 选择器值改变时触发的函数 this.selectedCity = this.cityList[e.detail.value]; } } }; ``` 这样就可以实现一个简单的城市选择器了。如果需要更复杂的功能，可以在 `cityList` 数组中添加省份、区县等信息，并在 `onChange` 函数中处理相应的逻辑。

阅读全文