宝哥软件园

微信小程序实现的采摘者多级联动功能示例

编辑:宝哥软件园 来源:互联网 时间:2021-08-23

本文实例讲述了微信小程序实现的采摘者多级联动功能。分享给大家供大家参考,具体如下:

页面结构部分:

选取器模式=' MultiSelector ' bind change=' bindjobcatange ' bindcolumnChange=' bingjobcatcolumnChange ' value=' { { multi index } } ' range=' { { job _ cat _ list } } ' range-key=' { ' cat _ name ' } ' view class='选取器{fenlei_title}} /view/pickerjs部分:

页面({ data : { server _ URL : app。全球数据。网址,fenlei_title: '分类、job_cat_list:[]、multiIndex: [0,0,0]、filter:{ keywords: ' '、job_cat_id:'' }、onload : function(){ this。job cat();},jobcat:函数(){ var=thiswx。请求({ URL : app。全球数据。URL '/XXX/eeee ',data: { x: ' ',y: '' },header : { ' content-type ' : ' application/JSON '//默认值},成功:函数(风险值数据=风险值数据。数据;那个。setdata({ job _ cat _ list :[data,data[0]['children'],data[0][' children '][0][' children ']});} });},bindjobcatchange:函数{这个。setdata({ multi index : e . detail。value })},bingjobcatcolumnchange:函数(e){ var指数=这个。数据。多指标;const data={ job _ cat _ list : this。数据。job _ cat _ list,多索引:这个。数据。多索引}这个。数据。多索引[e . detail。列]=e . detail。价值;如果(例如细节。列==0){数据。job _ cat _ list[1]=这个。数据。job _ cat _ list[0][index[0]][' children '];数据。job _ cat _ list[2]=数据。job _ cat _ list[1][index[1]][' children '];} else if(e . detail。column===1){ data。job _ cat _ list[2]=数据。job _ cat _ list[1][index[1]][' children '];这个。数据。过滤器。job _ cat _ id=数据。job _ cat _ list[2][index[2]][' cat _ name '];} else if(e . detail。column===2){ this。数据。过滤器。job _ cat _ id=数据。job _ cat _ list[2][e . detail。value][' cat _ name '];} this.setData(data) }})php后台部分:

公共函数job cate(){ $ ZP _ job _ catModel=new ZpJobCat();$ job _ cat=$ ZP _ job _ catModel-getcateAll();$ I=0;$ return _ data=[];foreach($ job _ cat as $ key=$ val){ $ return _ data[$ I]=$ val;$ return _ data[$ I][' children ']=[];if(!空($ val[' children ']){ $ c=0;foreach($ val[' children ']as $ k=$ v){ $ return _ data[$ I][' children '][$ c]=$ v;if(!空($ v[' children ']){ $ return _ data[$ I][' children '][$ c][' children ']=[];$ m=0;foreach($ v[' children ']as $ val 2){ $ return _ data[$ I][' children '][$ c][' children '][$ m]=$ val 2;百万美元;} } $ c;} } $ I;} $ this-_ success($ return _ data);}另外,本站在线工具小程序上的天气查询、车牌号归属地查询以及阴历阳历转换等工具就采用了联动查询功能,感兴趣的朋友可以扫描如下小程序码查看:

希望本文所述对大家微信小程序开发有所帮助。

更多资讯
游戏推荐
更多+