微信小程序省市联动功能（微信小程序省市二级联动）

微信小程序省市联动功能（微信小程序省市二级联动）

最近呢刚好做了一个省市联动的功能，今天看到有人问这个怎么做，我就把我做的放上来共享一下：

程序员必备接口测试调试工具：立即使用Apipost = Postman + Swagger + Mock + Jmeter Api设计、调试、文档、自动化测试工具 后端、前端、测试，同时在线协作，内容实时同步

做这个我用的是picker-view这个组件，现在来看一看picker-view的属性：

现在开始写wxml的代码，对了，插一句，我这里是把它写成一个模板的，先看看目录结构

我们先来看看cascade.wxml里的代码：

-

接下来是cascade.wxss的代码：

.cascade_box{ font-size:28rpx; width: 100%; height: 0; position: fixed; bottom: 0; left: 0;}.cascade_hei{ width: 100%; height:732rpx; background: #000; opacity: 0.5;}.cascade_find{ width: 100%; height: 500rpx; position: relative; /*bottom: 0; left: 0;*/ background: #fff;}.quxiao,.queren{ display: block; position: absolute; width: 100rpx; height: 80rpx; line-height: 80rpx; /*background: #00f;*/ text-align: center; color: #0f0;}.queren{ right: 0; top: 0;}.cascade_header{ height: 80rpx; width: 100%; margin-bottom: 20rpx;}-

好了这里的模板写好了，接下来是引用，引用就很简单了：

首先是las.wxml的引用：

然后是las.wxss的引用（你没看错就是一句）：

@import '../../teml/cascade.wxss';-

接下来就是js了：

在这里要先说一下保存省市的名称的json文件格式，这个json文件里又全国的省市名称(这里只写了北京市为例子，这是我请求的数据的例子，你要根据你自己请求的数据来做一些JS的判断)：

{ "regions": [{ "id": 110000, "name": "北京", "regions": [{ "id": 110100, "name": "北京市", "regions": [{ "id": 110101, "name": "东城区" }, { "id": 110102, "name": "西城区" }, { "id": 110103, "name": "崇文区" }, { "id": 110104, "name": "宣武区" }, { "id": 110105, "name": "朝阳区" }, { "id": 110106, "name": "丰台区" }, { "id": 110107, "name": "石景山区" }, { "id": 110108, "name": "海淀区" }, { "id": 110109, "name": "门头沟区" }, { "id": 110111, "name": "房山区" }, { "id": 110112, "name": "通州区" }, { "id": 110113, "name": "顺义区" }, { "id": 110114, "name": "昌平区" }, { "id": 110115, "name": "大兴区" }, { "id": 110116, "name": "怀柔区" }, { "id": 110117, "name": "平谷区" }, { "id": 110228, "name": "密云县" }, { "id": 110229, "name": "延庆县" }] }], "pinyin": "BeiJing", "hot": true, "municipality": true }]}-

这里就是对数据进行操作的las.js了

推荐教程：《微信小程序》

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。