首页 > 编程知识 正文

小程序框架,微信小程序城市三级联动

时间:2023-05-04 17:20:52 阅读:174736 作者:1048

与省市区那样可以直接使用小程序的组件不同,我们自己定义了城市-服务站-人员的三级联动效果。

使用picker程序集访问mode 的合法值为multiSelector(多列选择器);

其中range为二维数组,以二维数组形式[[]、[]、[]]填写数据即可。

picker mode='多选择器' bind change=' bindmultipickerchange ' bindcolumnchange=' bindmultipickercolumnchange ' value

DATA:(city: )、//保管地区station: )、//保管服务站perList: )、//保管服务人员multiarray: (,[]、multi arrrion : )

onload :函数(options ) { this.getCityStationPer ); (、)、(、)、维修地区-修理厂-维修人员(/getcitystationper : function )、(letthat=thisthat.setdata )、(city3360 )珠海)、) )广州) : )、)白云机场)、(天河区)、(深圳(: )、(宝安机场) ) /保管维修站PS“前山站”: ['lcddxh、“钱工”、“白云机场”:“ 保管服务人员} (that.data.multi array [0]=that.data.city that.data.multi array [1]=this.getarr ) that.data=this.getarr (that.data.multi array [1] [0],that.data.perList ); that.setdata (multi array : that.data.multi array ) },列已更改:

第1列变更时,在设定第2列数据的同时,根据第2列的第1个数据设定第3列的初始数据。

如果第2列有变更,请设定第3列的数据。

/****列已更改。 */bindmultipickercolumnchange : function (e ) { let that=this console.log (更改的列为),e.detail.columming )。 vardata={ multi array 3360 this.data.multi array,multi index : this.data.multi index }; data.multi index [ e.detail.column ]=e.detail.value; switch(e.detail.column ) { case 0: //列更改设置第二列中的数据letarr=that.getarr ) that.data.city[e.detail.value] 从that.data.station (data.multi array [1]=arr that.setdata ({ multi array 3360 data.multi array ) ) /第2列中取出第1项=arr column2that.setdata ({ multi array : data.multi array } ) break; case 1: //第列更改设置第三列数据letarr2=that.getarr (data.multi array [1] [ e.detail.value ],that.data.perlist ) arr ) for ) letIinarr ) if ) value==I ) ) returnarr ) I )的数值会发生变化,设定要选择的数据。

/****值发生变化*/bindmultipickerchange : function (e ) this.setdata ) (multiindex:e.detail.value ) ),

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。