省市区级联选择框，也可用于其他多层级数据的选择，典型场景为省市区选择。
目前场景设定的是3级，可根据自己的实际需求改成2级或者4级或者更多级。
数据源就是典型的树形结构的JSON数组数据。实际代码中我封装了一个关于省市区三级数据的js插件，具体使用方法省市区三级行政区划数据JS插件 。今天介绍用APICloud AVM框架封装省市区级联选择弹框。
组件文件
area-cascader.stml
.area-cascader_container { position: absolute; height: 100%; width: 100%; background-color: rgba(0,0,0,0.1); } .area-cascader_box{ align-items: center; position: absolute; bottom: 0; width: 100%; height: 70%; background-color: #ffffff; border-top-left-radius: 30px; border-top-right-radius: 30px; } .area-cascader_box-header{ width: 100%; flex-flow: row nowrap; justify-content: space-between; align-items: center; padding: 10px 15px 0 15px; } .area-cascader_box-header-label{ font-size: 18px; } .area-cascader_box-header-button{ font-size: 40px; color: #ccc; } .area-cascader_box-nav{ width: 100%; flex-flow: row nowrap; justify-content: flex-start; align-items: center; padding: 15px; } .area-cascader_box-nav-item{ box-sizing: border-box; align-items: center; /* background-color: #452334; */ margin-right: 20px; justify-content: center; } .area-cascader_box-nav-item--selected{ font-size: 16px; padding-bottom: 10px; border-bottom: 3px solid #49c916; } .area-cascader_box-nav-item--unselected{ font-size: 16px; padding-bottom: 10px; border-bottom: 3px solid #49c916; } .area-cascader_box-nav-item--result{ font-size: 16px; padding-bottom: 13px; border-bottom: 0; } .area-cascader_pane{ padding-left: 15px; padding-right: 10px; width: 100%; height: 80%; } .area-cascader_pane-option{ flex-flow: row nowrap; align-items: flex-start; justify-content: space-between; padding: 5px 0; }组件使用
demo-area-cascader.stml
.page { height: 100%; background-color: #ffffff; } .box{ flex-flow: row nowrap; justify-content: space-between; align-items: center; margin: 10px; border-radius: 5px; background-color: #f0f0f0; padding: 10px; } .more{ width: 20px; }
