Use uniapp to implement the city selector function

Using uniapp to implement the city selector function requires specific code examples

With the rapid development of the mobile Internet, people’s demand for convenient city selector functions is also increasing. Come higher and higher. This function can be easily implemented using uniapp. A specific code example is given below.

First, we need to prepare a city selector component. In uniapp, we can use the Picker selector component to implement the city selector function. Add the following code to the template:

<template>
  <view class="container">
    <picker mode="multiSelector" :value="defaultCity" @change="onChange">
      <view class="picker">
        {{city[0][defaultCity[0]]}}-{{city[1][defaultCity[1]]}}-{{city[2][defaultCity[2]]}}
      </view>
    </picker>
  </view>
</template>

In the script section, we need to define city data and the default selected city. You can add the following code to data:

<script>
export default {
  data() {
    return {
      defaultCity: [0, 0, 0], // 默认选中城市
      city: [['北京市', '上海市', '广州市', '深圳市'], ['朝阳区', '徐汇区', '天河区', '福田区'], ['三里屯', '淮海路', '天河城', '华强北']]
    }
  },
  methods: {
    onChange(e) {
      this.defaultCity = e.detail.value; // 更新选择的城市
      console.log('选择的城市：', this.city[0][this.defaultCity[0]], this.city[1][this.defaultCity[1]], this.city[2][this.defaultCity[2]]);
    }
  }
}
</script>

As you can see, we have defined a two-dimensional array city of city data, where each dimension represents a level of selection. For example, the first dimension represents provinces, the second dimension represents urban areas, and the third dimension represents specific streets. The city we select by default is defaultCity, and we use the onChange method to update the selected city and print it out.

Finally, beautify our city selector by adding styles. Add the following code in style:

<style scoped>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.picker {
  font-size: 32rpx;
  color: #333;
  padding: 20rpx;
  background-color: #fff;
  border-radius: 10rpx;
}
</style>

The above code defines the style of the container and selector, making the city selector look more beautiful.

Through the above code example, we successfully implemented a simple city selector function using uniapp. Of course, city data can be modified according to actual needs, such as dynamically obtaining city data from the interface. Hopefully this example will help you implement more complex city selector functionality.

The above is the detailed content of Use uniapp to implement the city selector function. For more information, please follow other related articles on the PHP Chinese website!