原生js+css实现微信风格底部弹出省市区选择器代码-html代码-BFW代码库

代码语言：html
所属分类：选择器
代码描述：原生js+css实现微信风格底部弹出省市区选择器代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.6.4.0.css">
<style>
     * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     -webkit-tap-highlight-color: transparent;
 }
 
 body {
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
     background: linear-gradient(135deg, #f5f7fa 0%, #e4edf5 100%);
     min-height: 100vh;
     padding: 20px;
     color: #333;
     line-height: 1.6;
 }
 
 .container {
     max-width: 480px;
     margin: 0 auto;
     background: white;
     border-radius: 16px;
     box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
     padding: 25px;
     position: relative;
     overflow: hidden;
 }
 
 .header {
     text-align: center;
     margin-bottom: 30px;
     position: relative;
 }
 
 .header::after {
     content: '';
     display: block;
     width: 60px;
     height: 4px;
     background: #07C160;
     border-radius: 2px;
     margin: 12px auto 0;
 }
 
 h1 {
     font-size: 26px;
     color: #333;
     font-weight: 600;
 }
 
 .description {
     text-align: center;
     color: #666;
     margin-bottom: 30px;
     font-size: 15px;
     line-height: 1.5;
 }
 
 .form-group {
     margin-bottom: 25px;
 }
 
 label {
     display: block;
     margin-bottom: 10px;
     font-size: 16px;
     color: #444;
     font-weight: 500;
     display: flex;
     align-items: center;
 }
 
 label i {
     margin-right: 10px;
     color: #07C160;
 }
 
 .input-field {
     width: 100%;
     padding: 16px 20px;
     border: 1px solid #e0e0e0;
     border-radius: 10px;
     font-size: 16px;
     background-color: #f9f9f9;
     caret-color: #07C160;
     transition: all 0.3s;
 }
 
 .input-field:focus {
     border-color: #07C160;
     background-color: #fff;
     box-shadow: 0 0 0 2px rgba(7, 193, 96, 0.1);
     outline: none;
 }
 
 .input-field::placeholder {
     color: #aaa;
 }
 
 .features {
     display: flex;
     flex-wrap: wrap;
     gap: 12px;
     margin: 30px 0;
 }
 
 .feature {
     flex: 1 0 calc(50% - 12px);
     background: #f1f8ff;
     padding: 15px;
     border-radius: 10px;
     font-size: 14px;
     min-width: 0;
 }
 
 .feature strong {
     display: block;
     margin-bottom: 5px;
     color: #07C160;
 }
 
 .stats {
     background: #f9f9f9;
     border-radius: 10px;
     padding: 20px;
     margin: 30px 0;
     text-align: center;
 }
 
 .stats h3 {
     margin-bottom: 15px;
     color: #07C160;
 }
 
 .stats-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 15px;
 }
 
 .stat-item {
     background: white;
     padding: 12px;
     border-radius: 8px;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
 }
 
 .stat-value {
     font-size: 18px;
     font-weight: bold;
     color: #07C160;
     margin-bottom: 5px;
 }
 
 .stat-label {
     font-size: 12px;
     color: #666;
 }
 
 .instructions {
     background: #f9f9f9;
     border-radius: 10px;
     padding: 20px;
     margin-top: 30px;
 }
 
 .instructions h3 {
     margin-bottom: 15px;
     color: #333;
     display: flex;
     align-items: center;
 }
 
 .instructions h3 i {
     margin-right: 10px;
     color: #07C160;
 }
 
 .instructions ul {
     padding-left: 20px;
 }
 
 .instructions li {
     margin-bottom: 10px;
     font-size: 14px;
 }
 
 .picker-modal {
     position: fixed;
     bottom: 0;
     left: 0;
     width: 100%;
     background: #fff;
     border-top-left-radius: 16px;
     border-top-right-radius: 16px;
     box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
     transform: translateY(100%);
     transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
     z-index: 1000;
     max-height: 80vh;
 }
 
 .picker-modal.active {
     transform: translateY(0);
 }
 
 .picker-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 20px;
     border-bottom: 1px solid #f0f0f0;
 }
 
 .picker-title {
     font-size: 18px;
     font-weight: 600;
     color: #333;
 }
 
 .picker-close {
     color: #888;
     font-size: 16px;
     background: none;
     border: none;
     cursor: pointer;
     padding: 8px 16px;
     border-radius: 6px;
     transition: background-color 0.2s;
 }
 
 .picker-close:active {
     background-color: #f0f0f0;
 }
 
 .picker-confirm {
     color: #07C160;
     font-size: 16px;
     font-weight: 500;
     background: none;
     border: none;
     cursor: pointer;
     padding: 8px 16px;
     border-radius: 6px;
     transition: background-color 0.2s;
 }
 
 .picker-confirm:active {
     background-color: rgba(7, 193, 96, 0.1);
 }
 
 .picker-content {
     display: flex;
     height: 300px;
     overflow: hidden;
 }
 
 .picker-column {
     flex: 1;
     overflow-y: auto;
     height: 100%;
     padding: 10px 0;
 }
 
 .picker-item {
     padding: 16px 20px;
     font-size: 16px;
     text-align: center;
     transition: all 0.2s;
     position: relative;
 }
 
 .picker-item.active {
     color: #07C160;
     font-weight: 500;
     background-color: rgba(7, 193, 96, 0.05);
 }
 
 .picker-item:active {
     background-color: #f0f0f0;
 }
 
 .picker-item.active::after {
     content: '';
     position: absolute;
     left: 0;
     top: 50%;
     transform: translateY(-50%);
     width: 4px;
     height: 40%;
     background-color: #07C160;
     border-top-right-radius: 4px;
     border-bottom-right-radius: 4px;
 }
 
 .overlay {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.5);
     opacity: 0;
     visibility: hidden;
     transition: all 0.3s;
     z-index: 999;
 }
 
 .overlay.active {
     opacity: 1;
     visibility: visible;
 }
 
 @media (max-width: 480px) {
     .container {
         padding: 20px 15px;
         border-radius: 12px;
     }
     
     h1 {
         font-size: 22px;
     }
     
     .feature {
         flex: 1 0 100%;
     }
     
     .stats-grid {
         grid-template-columns: 1fr 1fr;
     }
 }
</style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>微信风格省市区选择器</h1>
        </div>

        <p class="description">点击下方输入框体验从底部弹出的省市区选择面板，支持三级联动选择</p>

        <div class="form-group">
            <label for="location"><i class="fas fa-map-marker-alt"></i>选择省市区</label>
            <input type="text" class="input-field" id="location" placeholder="请选择省市区" readonly>
        </div>

        <div class="features">
            <div class="feature">
                <strong>三级联动</strong>
                <span>省、市、区三级联动选择</span>
            </div>
            <div class="feature">
                <strong>底部弹出</strong>
                <span>从底部平滑弹出选择面板</span>
            </div>
            <div class="feature">
                <strong>微信风格</strong>
                <span>类似微信小程序的UI设计</span>
            </div>
            <div class="feature">
                <strong>移动友好</strong>
                <span>专为移动端优化的交互体验</span>
            </div>
        </div>

        <div class="stats">
            <h3>中国行政区划数据</h3>
            <div class="stats-grid">
                <div class="stat-item">
                    <div class="stat-value">34</div>
                    <div class="stat-label">省级行政区</div>
                </div>
                <div class="stat-item">
                    <div class="stat-value">333</div>
                    <div class="stat-label">地级行政区</div>
                </div>
                <div class="stat-item">
                    <div class="stat-value">2846</div>
                    <div class="stat-label">县级行政区</div>
                </div>
            </div>
        </div>

        <div class="instructions">
            <h3><i class="fas fa-info-circle"></i>使用说明</h3>
            <ul>
                <li>点击输入框弹出省市区选择面板</li>
                <li>从左到右依次选择省、市、区</li>
                <li>点击"确定"按钮确认选择</li>
                <li>点击"取消"或遮罩层关闭面板</li>
            </ul>
        </div>
    </div>

    <div class="overlay" id="overlay"></div>

    <div class="picker-modal" id="pickerModal">
        <div class="picker-header">
            <button class="picker-close" id="closePicker">取消</button>
            <span class="picker-title">选择地区</span>
            <button class="picker-confirm" id="confirmPicker">确定</button>
        </div>
        <div class="picker-content" id="pickerContent">
            <!-- 省份列 -->
            <div class="picker-column" id="provinceColumn">
                <!-- 省份选项将通过JS动态添加 -->
            </div>

            <!-- 城市列 -->
            <div class="picker-column" id="cityColumn">
                <!-- 城市选项将通过JS动态添加 -->
            </div>

            <!-- 区域列 -->
            <div class="picker-column" id="districtColumn">
                <!-- 区域选项将通过JS动态添加 -->
            </div>
        </div>
    </div>

    <script>
         
    // 完整的中国省市区数据
    const locationData = [
        {
            name: "北京市",
            cities: [
                {
                    name: "北京市",
                    districts: ["东城区", "西城区", "朝阳区", "丰台区", "石景山区", "海淀区", "门头沟区", "房山区", "通州区", "顺义区", "昌平区", "大兴区", "怀柔区", "平谷区", "密云区", "延庆区"]
                }
            ]
        },
        {
            name: "天津市",
            cities: [
                {
                    name: "天津市",
                    districts: ["和平区", "河东区", "河西区", "南开区", "河北区", "红桥区", "东丽区", "西青区", "津南区", "北辰区", "武清区", "宝坻区", "滨海新区", "宁河区", "静海区", "蓟州区"]
                }
            ]
        },
        {
            name: "河北省",
            cities: [
                {
                    name: "石家庄市",
                    districts: ["长安区", "桥西区", "新华区", "井陉矿区", "裕华区", "藁城区", "鹿泉区", "栾城区", "井陉县", "正定县", "行唐县", "灵寿县", "高邑县", "深泽县", "赞皇县", "无极县", "平山县", "元氏县", "赵县", "晋州市", "新乐市"]
                },
                {
                    name: "唐山市",
                    districts: ["路南区", "路北区", "古冶区", "开平区", "丰南区", "丰润区", "曹妃甸区", "滦南县", "乐亭县", "迁西县", "玉田县", "遵化市", "迁安市", "滦州市"]
                },
                {
                    name: "秦皇岛市",.........完整代码请登录后点击上方下载按钮下载查看