最近做项目的时候，遇到了这样的问题。 省市区的联动啊。 需要定制词典进行设置。 那么，微信小程序拥有的省市区町村选择就不能使用了。 经过三支香烟的催化，终于写了下来。 介绍代码示例。
首先，将arealist.js文件保存在utils文件夹中。 内容如下。
const areaList=[ { name: '河南'，id:1，parentid :0 ]，{ name: '浙江'，id:2，parentid :0 ]，{ name 333:0 } Parentid33600} { name: '新乡'，id:4，parentId:1 }，{ name: '洛阳'，id:5，parentid 33601 }，{ name 333:1 } parentId:3 }、{ name : '高新技术产业开发区'、id:8、parentId:3 }、{ name : '中原区'、id:9、parentid 33603 } parentid parentId:4 }、{ name : '延津县'、id:12、parentId:4 }、{ name : '孟津县}、id:14 Parentid33605}、{ parentId:2 }、{ name : '台州市}、id:17、parentId:2 }、{ name : '西湖区}、id:18、pad { name : '余杭区}、id:20、parentId:16 }、{ name : '椒江区}、id:21、parentid :17 } module.exports=arts View Code然后在需要的页面上导入地区词典，在onLoad的时候解析词典，遍历第一手数据，准备使用。
consta realist=require (' ./utils/area list.js ' )； page (数据： )多阵列： (，multi index : (0，0，0 )，province: ) )、绑定多矩阵：功能e.detail.value ) this.setdata ) ) multi bindmultipickercolumnchange : function (e ) { console.log )修改后的列显示为(，e . e.detail.valumn )。vardata={ multi array 3360 this.data.multi array，multi index : this.data.multi index }； data.multi index [ e.detail.column ]=e.detail.value； constprovincename=data.multi array [0] [ data.multi index [0]； let provinceId=' '； let province=this.data.province； let quyuList=[]，cityList=[]，provinceList=[]，city=[]，area=[]； try{province.foreach(item=(if ) item.name==provincename ) { provinceId=item.id； throw(newerror(finditem ) } ) catch ) err ) ) city=area list.filter (item={ return item.parentid==pren tid ) ) try { area=area list.filter (item={ return item.parentid==city [ data.multi index [1].id )； }}catch(err ) }}elseif ) e.detail.column==1) { data.multiIndex[2]=0； area=area list.filter (item={ return item.parentid==city [ e.detail.value ].id； } } else { const city name=data.multi array [1] [ data.multi index [1]； let cityId=' '； try{arealist.foreach(item={if ) item.name===cityname ) { cityId=item.id； throw(newerror ) (finditem )； } } catch { err } { } area=area list.filter (item={ return item.parentid==cityid； } } province list=province.map (item={returnitem.name } ) citylist=city.map ) item={ return item.name； ) quy ulist=area.map (item={ return item.name； ) data.multiArray=[provinceList，cityList，quyuList]，this.setdata(data； }、onLoad () { var province=[]，city=[]，area=[]； province=area list.filter (item={ return item.parentid==0； } city=area list.filter (item={ return item.parentid==province [0].id； } area=area list.filter (item={ return item.parentid==city [0].id； } varprovincelist=province.map (item={returnitem.name } ) varcitylist=city.map ) item={ return item.name； } varquyulist=area.map (item={ return item.name； } this.setdata (multi array : [ province list，cityList，quyuList]，province } )以下为wxml页面： 想看效果的人可以直接贴上试试
view class=' section ' view class=' section _ _ title '多列选择器/viewpickermode=' multi selector ' bind change=' bindmultipickerchange ' bindmultipickercolumnchange=' viewpickerchange hange " ' range=' { multi array } } ' view class=' picker '当前选择： { { multi array [0] [ multi index [0] } }， { multi array [0] } { { multi array [2] [ multi index [2] }/view/picker/view (在we chat开发人员工具中，1级目录选项为2级延迟) 还没找到说明
转载于：https://www.cn blogs.com/gitbylegend/p/11413597.html