微信小程序自定义省市区下拉框

1.微信小程序官方自带的省市区picker组件

picker组件官方文档

WXML

<view class="section"><view class="section__title">省市区选择器</view><picker mode="region" bindchange="bindRegionChange" value="{{region}}" custom-item="{{customItem}}"><view class="picker">当前选择：{{region[0]}}，{{region[1]}}，{{region[2]}}</view></picker>
</view>

Page({bindRegionChange: function (e) {console.log('picker发送选择改变，携带值为', e.detail.value)this.setData({region: e.detail.value})}
})

效果图

省市区级联选择

2.自定义省市街道级联下拉框

微信官方提供的组件已经很方便了，但却无法满足项目中的一些特殊需求；目前公司所在项目的需求是省市区街道的四级级联，并且只展示部分业务需要的省份，市区街道按顺序级联。

效果图

实现思路

小程序端将用户每次选择的省市区的编码依次传给后台用于查询下级区域（如省编码用于查询对应市信息，依次查询），后台每次会返回对应的编码与地名，然后在js页面中遍历刚刚得到的编码与地名json数据，拼装出2个新的数组，分别作为picker组件的range以及自定义data-xxx的数据来源。

WXML

Page({data: {province: '',city: '',district: '',provinceIndex: 0,cityIndex: 0,districtIndex: 0,provinceCode: '',cityCode: '',districtCode: '',},onLoad: function (options) {var that = thisvar header = {'content-type' : 'application/json'} wx.request({url: 'https://yourserver?parentId=' + '', //查询省信息时parentId为空method: 'POST',header: header,success: function (provinceRes) {var proRespCode = provinceRes.data.resultif (proRespCode == 500) {wx.showToast({title: '服务器繁忙!',icon: 'loading',duration: 1500,})} else if (proRespCode == 200) {var provinceArray = []var provinceCodeArray = []var cityParentId = provinceRes.data.areacodeInfoList[0].areacode //省编码，用于默认级联查询for (var iprovince = 0; iprovince < provinceRes.data.areacodeInfoList.length; iprovince++) {provinceArray[iprovince] = provinceRes.data.areacodeInfoList[iprovince].areanameprovinceCodeArray[iprovince] = provinceRes.data.areacodeInfoList[iprovince].areacode}that.setData({province: provinceArray,provinceCode: provinceCodeArray,})wx.request({url: 'https://yourserver?parentId=' + cityParentId,method: 'POST',header: header,success: function (cityRes) {var cityRespCode = cityRes.data.resultif (cityRespCode == 200) {var cityArray = []var cityCodeArray = []var districtParentId = cityRes.data.areacodeInfoList[0].areacode //市编码，用于默认级联查询for (var icity = 0; icity < cityRes.data.areacodeInfoList.length; icity++) {cityArray[icity] = cityRes.data.areacodeInfoList[icity].areanamecityCodeArray[icity] = cityRes.data.areacodeInfoList[icity].areacode}that.setData({city: cityArray,cityCode: cityCodeArray})wx.request({url: 'https://yourserver?parentId=' + districtParentId,method: 'POST',header: header,success: function (districtRes) {var districtRespCode = districtRes.data.resultif (districtRespCode == 200) {var districtArray = []var districtCodeArray = []var streetParentId = districtRes.data.areacodeInfoList[0].areacode //区编码 用于默认级联查询for (var idistrict = 0; idistrict < districtRes.data.areacodeInfoList.length; idistrict++) {districtArray[idistrict] = districtRes.data.areacodeInfoList[idistrict].areanamedistrictCodeArray[idistrict] = districtRes.data.areacodeInfoList[idistrict].areacode}that.setData({district: districtArray,districtCode: districtCodeArray})} else {wx.showToast({title: '服务器繁忙!',icon: 'loading',duration: 1500,})}}})}}})} else {wx.showToast({title: '服务器繁忙!',icon: 'loading',duration: 1500,})}}})},/**监听省份选择 */provincePicker: function (e) {var that = thisvar header = { 'content-type': 'application/json' }//改变index值，通过setData()方法重绘界面var currentProIndex = e.detail.valuevar currentProCode = e.currentTarget.dataset.procode[currentProIndex] //当前省代表的Code,当做查询级联市的parentidthat.setData({provinceIndex: currentProIndex,cityIndex: 0,districtIndex: 0,})wx.request({url: 'https://yourserver?parentId=' + currentProCode,method: 'POST',header: header,success: function (cityRes) {var cityRespCode = cityRes.data.resultif (cityRespCode == 200) {var cityArray = []var cityCodeArray = []var districtParentId = cityRes.data.areacodeInfoList[0].areacode //市编码，用于默认级联查询for (var icity = 0; icity < cityRes.data.areacodeInfoList.length; icity++) {cityArray[icity] = cityRes.data.areacodeInfoList[icity].areanamecityCodeArray[icity] = cityRes.data.areacodeInfoList[icity].areacode}that.setData({city: cityArray,cityCode: cityCodeArray})wx.request({url: 'https://yourserver?parentId=' + districtParentId,method: 'POST',header: header,success: function (districtRes) {var districtRespCode = districtRes.data.resultif (districtRespCode == 200) {var districtArray = []var districtCodeArray = []var streetParentId = districtRes.data.areacodeInfoList[0].areacode //区编码 用于默认级联查询for (var idistrict = 0; idistrict < districtRes.data.areacodeInfoList.length; idistrict++) {districtArray[idistrict] = districtRes.data.areacodeInfoList[idistrict].areanamedistrictCodeArray[idistrict] = districtRes.data.areacodeInfoList[idistrict].areacode}that.setData({district: districtArray,districtCode: districtCodeArray})} else {wx.showToast({title: '服务器繁忙!',icon: 'loading',duration: 1500,})}}})} else {wx.showToast({title: '服务器繁忙!',icon: 'loading',duration: 1500,})}}})},/**监听城市选择 */cityPicker: function (e) {var that = thisvar header = {'content-type' : 'application/json'}//改变index值，通过setData()方法重绘界面var currentCityIndex = e.detail.valuevar currentCityCode = e.currentTarget.dataset.citycode[currentCityIndex] //当前市代表的Code,当做查询级联区的parentidthat.setData({cityIndex: currentCityIndex,districtIndex: 0,})wx.request({url: 'https://yourserver?parentId=' + currentCityCode,method: 'POST',header: header,success: function (districtRes) {var districtRespCode = districtRes.data.resultif (districtRespCode == 200) {var districtArray = []var districtCodeArray = []var streetParentId = districtRes.data.areacodeInfoList[0].areacode //区编码 用于默认级联查询for (var idistrict = 0; idistrict < districtRes.data.areacodeInfoList.length; idistrict++) {districtArray[idistrict] = districtRes.data.areacodeInfoList[idistrict].areanamedistrictCodeArray[idistrict] = districtRes.data.areacodeInfoList[idistrict].areacode}that.setData({district: districtArray,districtCode: districtCodeArray})} else {wx.showToast({title: '服务器繁忙!',icon: 'loading',duration: 1500,})}}})},/**监听市区选择 */districtPicker: function (e) {var that = this//改变index值，通过setData()方法重绘界面var currentdistrictIndex = e.detail.valuevar currentdistrictCode = e.currentTarget.dataset.councode[currentdistrictIndex] //当前区代表的Code,当做查询级联街道的parentidthat.setData({districtIndex: currentdistrictIndex,})}
})

本文只是提供一个小程序端的解决思路，需要完整实现还需要后台数据的支持，以下是小程序在github上的地址：

https://github.com/parasol-wu/wxapp-area-picker

微信小程序自定义省市区下拉框相关推荐

微信小程序下拉框插件_微信小程序自定义select下拉选项框组件的实现代码_清玖_前端开发者...
知识点:组件,animation,获取当前点击元素的索引与内容微信小程序中没有select下拉选项框,所以只有自定义.自定义的话,可以选择模板的方式,也可以选择组件的方式来创建. 这次我选择了组件, ...
微信小程序自定义select下拉选择组件
微信小程序自定义select下拉选择组件微信小程序原生开发中,常用到的是从底部弹起的滚动选择器(picker),而有些项目需要用到下拉选择,话不多说,下面就可以把下拉选择封装成一个自定义组件: 1. ...
微信小程序之select下拉框
wxml: <view class="classify-kuangjia"><view class="classify-kuangjia2"& ...
微信小程序原生的下拉框组件
前言近日开发微信小程序时,需要一个下拉框的组件,使用和PC端下拉框一样的方式会显得很丑,于是发现微信官方API有个wx.showActionSheet,但是有诸多限制,例如:最大长度只能是6项,多选 ...
微信小程序如何实现下拉框效果？（代码示例）
wxml代码: <view class='top-text'> 选择接收班级</view><view class='top-selec ...
微信小程序自定义select下拉选项框
第一步:创建组件所需的文件第二步:开始配置组件 select.json {"component": true,"usingComponents": {&quo ...
微信小程序下拉框插件_微信小程序三级联动下拉框插件
//点击事件,点击弹出选择页 areaTap: function () { this.setData({ addressMenuIsShow:true }) }, cityCancel: functi ...
html自定义js程序,JS中微信小程序自定义底部弹出框
实现微信小程序底部弹出框效果,代码分为html,css和js两部分,具体代码详情大家参考下本文. html CSS .commodity_screen { width: 100%; height: 1 ...
微信小程序实战篇-下拉刷新与加载更多
下拉刷新实现下拉刷新目前能想到的有两种方式调用系统的API,系统有提供下拉刷新的API接口下拉刷新API.png 监听scroll-view,自定义下拉刷新,还记得scroll-view里面有一 ...
微信小程序订单页面下拉刷新上拉分页加载
微信小程序开发交流qq群 581478349 承接微信小程序开发.扫码加微信. 正文: 效果图: 代码: json代码: {"enablePullDownRefresh" ...

微信小程序自定义省市区下拉框

1.微信小程序官方自带的省市区picker组件

2.自定义省市街道级联下拉框

微信小程序自定义省市区下拉框相关推荐

最新文章

热门文章