HarmonyOS鸿蒙最全微信小程序-省市二级联动_小程序选择省市二级(1)，读完我这份《HarmonyOS鸿蒙开发核心源码精编解析》面试至少多要3K

深知大多数程序员，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上鸿蒙开发知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

需要这份系统化的资料的朋友，可以戳这里获取

---

二、前端页面制作二级选择框

首先，我们先在页面画出二级选择框：

wxml:

<view>
    <picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}">
        <view class="inputbox flex">
            <text class="picker-text">{{city==null?"城市":city}}</text>
        </view>
    </picker>
</view>

这里用到的是picker控件，其中，bindchange方法是在我们选择完城市点击确定时触发，bindMultiPickerColumnChange方法是在我们滑动选项时触发。

value的值是我们在js里定义的数组multiIndex，multiIndex[0]表示第一列(省份)的选择， multiIndex[1]表示第二列(城市)的选择。multiArray是根据省份选择动态展示的城市列表数据，我们在js的选择事件里会去编写这段逻辑。

---

三、编写二级选择框需要的JS

下面，是我们这个页面的JS代码：

js:

var list = [];
import {
    multiArray,
    objectMultiArray
} from '../../utils/city.js';
 
Page({
    data: {
        city: null,
        multiIndex: [0, 0],
        multiArray: multiArray,
        objectMultiArray: objectMultiArray
    },
 
    bindMultiPickerChange: function (e) {
        this.setData({
            city: this.data.multiArray[1][this.data.multiIndex[1]]
        })
    },
 
    bindMultiPickerColumnChange: function (e) {
        console.log(e);
        var that = this;
        switch (e.detail.column) {
            case 0:
                list = [];
                for (var i = 0; i < that.data.objectMultiArray.length; i++) {
                    if (that.data.objectMultiArray[i].parid == that.data.objectMultiArray[e.detail.value].regid) {
                        list.push(that.data.objectMultiArray[i].regname);
                    }
                }
                that.setData({
                    "multiArray[1]": list,
                    multiIndex: [e.detail.value, 0]
                })
                break;
            case 1:
                that.setData({
                    "multiIndex[1]": e.detail.value,
                })
                break;
        }
    }
})

---

四、编写二级选择框需要的CSS

最后，是CSS样式文件。

wxss:

.inputbox {
    border-radius: 15px;
    margin-top: 8rpx;
    padding: 0 12px;
    box-sizing: border-box;
    border-bottom: 1px solid #dadada;
    width: 100%;
    height: 86rpx;
    line-height: 15px;
    font-size: 14px;
    background-color: #fff;
}
 
.picker-text {
    flex: 1; 
}
 
.flex {
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    align-items: center;
    justify-content: center;
}

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

统化的资料的朋友，可以戳这里获取](https://bbs.csdn.net/topics/618636735)**

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！