微信小程序省份固定的城市联动效果

朋友刚做小程序，需要做一个分开的并且省份固定的城市联动效果找到我，我查看一下官方文档确实没有，所以我自己找了个城市的数组取了一部分做了个demo，在此记录一下。

wxml

<view class="section"><view class="section__title">当前省份</view><view class="picker">当前选择：河北省</view>
</view><view class="section"><view class="section__title">选择市</view><picker bindchange="bindPickerChange" value="{{index1}}" range="{{dataArr}}" range-key="text"><view class="picker">当前选择：{{dataArr[index1].text}}</view></picker>
</view><view class="section"><view class="section__title">选择区（县）</view><picker value="{{index2}}" range="{{dataArr[index1].children}}" range-key="text"><view class="picker">当前选择：{{dataArr[index1].children[index2].text}}</view></picker>
</view>

Page({data: {dataArr: [{value: "130100",text: "石家庄市",children: [{value: "130102",text: "长安区"}, {value: "130103",text: "桥东区"}, {value: "130104",text: "桥西区"}, {value: "130105",text: "新华区"}, {value: "130107",text: "井陉矿区"}, {value: "130108",text: "裕华区"}, {value: "130121",text: "井陉县"}, {value: "130123",text: "正定县"}, {value: "130124",text: "栾城县"}, {value: "130125",text: "行唐县"}, {value: "130126",text: "灵寿县"}, {value: "130127",text: "高邑县"}, {value: "130128",text: "深泽县"}, {value: "130129",text: "赞皇县"}, {value: "130130",text: "无极县"}, {value: "130131",text: "平山县"}, {value: "130132",text: "元氏县"}, {value: "130133",text: "赵县"}, {value: "130181",text: "辛集市"}, {value: "130182",text: "藁城市"}, {value: "130183",text: "晋州市"}, {value: "130184",text: "新乐市"}, {value: "130185",text: "鹿泉市"}, {value: "130186",text: "其它区"}]}, {value: "130200",text: "唐山市",children: [{value: "130202",text: "路南区"}, {value: "130203",text: "路北区"}, {value: "130204",text: "古冶区"}, {value: "130205",text: "开平区"}, {value: "130207",text: "丰南区"}, {value: "130208",text: "丰润区"}, {value: "130223",text: "滦县"}, {value: "130224",text: "滦南县"}, {value: "130225",text: "乐亭县"}, {value: "130227",text: "迁西县"}, {value: "130229",text: "玉田县"}, {value: "130230",text: "唐海县"}, {value: "130281",text: "遵化市"}, {value: "130283",text: "迁安市"}, {value: "130284",text: "其它区"}]}, {value: "130300",text: "秦皇岛市",children: [{value: "130302",text: "海港区"}, {value: "130303",text: "山海关区"}, {value: "130304",text: "北戴河区"}, {value: "130321",text: "青龙满族自治县"}, {value: "130322",text: "昌黎县"}, {value: "130323",text: "抚宁县"}, {value: "130324",text: "卢龙县"}, {value: "130398",text: "其它区"}, {value: "130399",text: "经济技术开发区"}]}, {value: "130400",text: "邯郸市",children: [{value: "130402",text: "邯山区"}, {value: "130403",text: "丛台区"}, {value: "130404",text: "复兴区"}, {value: "130406",text: "峰峰矿区"}, {value: "130421",text: "邯郸县"}, {value: "130423",text: "临漳县"}, {value: "130424",text: "成安县"}, {value: "130425",text: "大名县"}, {value: "130426",text: "涉县"}, {value: "130427",text: "磁县"}, {value: "130428",text: "肥乡县"}, {value: "130429",text: "永年县"}, {value: "130430",text: "邱县"}, {value: "130431",text: "鸡泽县"}, {value: "130432",text: "广平县"}, {value: "130433",text: "馆陶县"}, {value: "130434",text: "魏县"}, {value: "130435",text: "曲周县"}, {value: "130481",text: "武安市"}, {value: "130482",text: "其它区"}]}],index1: 0,index2: 0},bindPickerChange: function(e) {console.log('picker发送选择改变，携带值为', e.detail.value)this.setData({index1: e.detail.value})}
})

数据是别处找的，其中的 ‘value ’ 此处并没有用上，~懒得删~

微信小程序省份固定的城市联动效果相关推荐

微信小程序时间标签与范围联动设计实现
微信小程序时间标签与范围联动设计实现?最近忙于一个有关数据管理的微信小程序开发,遇到了上图情况,虽然很简单,还是整理一下.若有错误,请广大朋友们指正. 使用微信小程序组件radio-group.pic ...
微信小程序获取当前所在城市（地区定位与切换）
小程序地区定位与切换添加链接描述添加链接描述添加链接描述 <text class="chengshi">{{citynames}}</text>< ...
微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例
本文实例讲述了微信小程序实现slideUp.slideDown滑动效果及点击空白隐藏功能.分享给大家供大家参考,具体如下: 怎样实现jq中的slideUp或者slideDown这种动画效果呢,我的思路 ...
微信小程序实现抖音切换视频效果
微信小程序实现抖音切换视频效果思路: 使用微信小程序的swiper组件,使其竖向滑动分页加载,每次加载3个视频,当滑动到只剩1个视频时加载下一页问题: 加载多个视频时,多个视频会同时播放效果图 ...
微信小程序中如何制作瀑布流效果
微信小程序中如何制作瀑布流效果如图是首先,页面布局,页面分为两个部分,左右各一部分,各自插入图片,页面代码如下: <view class="city_history"> ...
微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例 1
本文实例讲述了微信小程序实现slideUp.slideDown滑动效果及点击空白隐藏功能.分享给大家供大家参考,具体如下: 怎样实现jq中的slideUp或者slideDown这种动画效果呢,我的思路 ...
uniapp、hbuilderx做微信小程序，获取当前城市定位（省份国家街道等）
获取用户当前位置分为3步 1.获取位置用户请求权限 2.获取经纬度 3.经纬度转换为城市一.获取位置用户请求权限获取权限的目的主要是因为避免转换不了城市的报错(可能出现不提示"需要先请求 ...
小程序获取城市经纬度_微信小程序获取当前所在城市的方法
现在很多企业商家为了提供更准确的服务,基本都要获取用户当前所在的地理位置,城市是其中最基本的.而微信小程序官方提供的API只能获取当前地理位置的经纬度,需要经过第三方转换才可以得到我所需的城市名,经过 ...
微信小程序定位获取经纬度城市街道等位置信息
看文章扫一扫领红包哦请先看微信小程序关于定位的API:https://mp.weixin.qq.com/debug/wxadoc/dev/api/location.html#wxgetlocat ...

微信小程序省份固定的城市联动效果

微信小程序省份固定的城市联动效果相关推荐

最新文章

热门文章

微信小程序 省份固定的城市联动效果

微信小程序 省份固定的城市联动效果相关推荐

最新文章

热门文章

微信小程序省份固定的城市联动效果

微信小程序省份固定的城市联动效果相关推荐