uni-app省市区地址选择器

最新推荐文章于 2025-10-12 12:23:25 发布

原创

最新推荐文章于 2025-10-12 12:23:25 发布 · 9.6k 阅读

28 ·

CC 4.0 BY-SA版权

本文介绍了在uni-app中如何使用第三方组件实现省市区地址选择器，该组件兼容H5、小程序和APP。提供了组件下载链接及效果图，并给出了代码示例。

前言：uni-app原生选择器并不支持H5，因此需要引入外部组件。

组件：

支持h5 小程序 app

组件下载地址：https://pan.baidu.com/s/1G6N2vHnaOLyR79yc0B9qog 提取码：7nr2

效果图：

代码示例：

<template>
    <view class="content">
        <pickerAddress @change="change">{
  
  {txt}}</pickerAddress>
    </view>
</template>


    import pickerAddress from '../../components/pickerAddress/pickerAddress.vue'
    export default {
        components:{
            pickerAddress
        },
        data() {
            return {
                txt: '选择地址',
                title: 'Hello'
            }
        },
        onLoad() {

        },
        methods: {
            change(data) {
                this.txt