更新记录

1.0.2（2023-12-15）

上传city数据源

1.0.1（2023-12-13）

增加第二次打开，自动记忆上次选择的位置逻辑

1.0.0（2023-12-13）

基于picker-view封装的城市选择器，简单好用【小程序、H5亲测有效】

平台兼容性

创作不易，请给五星评论

有疑问或定制 +q:408757217,备注uniapp

示例代码

<template>
    <view class="content">
        <view class="uni-title uni-common-pl">城市Picker选择器</view>
        <view class="uni-list">
            <view class="uni-list-cell">
                <view class="uni-list-cell-left">
                    当前选择
                </view>
                <view class="uni-list-cell-db">
                    <view class="as-input" @click="openPicker">
                        <view class="placeholder" v-if="result==undefined||result==''">请选择所在城市</view>
                        <view class="as-content" v-else>{{result}}</view>
                    </view>
                </view>
            </view>
        </view> 

        <niceui-city-picker-view ref="cityPicker" v-model="value"></niceui-city-picker-view>
    </view> 
</template>
<script>
    import NiceuiCityPickerView from '@/components/niceui-city-picker-view.vue'  //路径根据导入后的真实路径为准
    export default {
        components:{
            NiceuiCityPickerView
        },
        data: function () {
            return {
                value:{
                    provName:'',
                    cityName:''
                }
            }
        },
        computed:{
            result(){
                if(this.value.provName!=''){
                    return this.value.provName+"/"+this.value.cityName;
                }else{
                    return ""
                }
            }
        },
        methods:{
            openPicker(){
                this.$refs.cityPicker.show()
            }
        }
    }
</script>

<style lang="scss" scoped>
.content{
    background-color: #f7f7f7;
    width: 100vw;
    /* #ifdef H5 */
    height: calc(100vh - 84rpx);
    /* #endif */
    /* #ifndef H5 */
    height: 100vh;
    /* #endif */

}
.uni-title{
    font-size: 33rpx;
    font-weight: bold;
    padding: 20rpx 20rpx;
}
.uni-list-cell{
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx 20rpx;
    .uni-list-cell-left{
        font-size: 35rpx;
    }
}
.uni-list-cell-db{
    flex:1
}
.as-input{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    .customer-icon{
        padding: 0 0 0 5rpx;
    }
    .placeholder{
        font-size:33rpx;
        color:#999;
    }
    .as-content{
        color: #333;
        font-size: 33rpx;
    }
}
</style>