우리가 공식 셀렉터 도시의 많은의 사용을 용이하게하는 작은 프로그램을 개발,하지만 때로는 우리가 선택기 도시의 자신의 세트를 작성해야하는 경우,
우리는 도시 코드에,별로 말, 백 엔드에 대응, 후 공정의 편의를 도시 ID가 필요 선택
첫째, 우리는 .wxml에
<뷰 클래스 = '항목'> 所在地区 <선택기 MODE = "multiSelector"bindchange = "bindRegionChange"bindcolumnchange = "bindRegionColumnChange"범위 = '{{멀티 어레이}}'> <텍스트 WX : 만약 = "{{addressCity}}" > {{addressCity [0]}} {{addressCity [1]}} {{addressCity [2]}} </ 텍스트> <텍스트 WX : 다른 클래스 = '자리'>请选择地区</ 텍스트> </ 선택기 > </보기>
에서 wxss
페이지 {배경 색 : # efeff4;} .tui-피커 내용 { 패딩 : 30rpx; 텍스트 정렬 : 센터; } .tui 피커 이름 { 높이 : 80rpx; 라인 높이 80rpx; } .tui 피커 디테일 { 신장 80rpx; 라인 높이 80rpx; 배경 색상 : #fff; 폰트 크기 : 35rpx; 패딩 : 0 10px; 오버 플로우 : 숨겨진; }
쓰기 로직의 .js에서
페이지 ({ 데이터 { province_list : NULL, province_name : NULL, CITY_LIST : NULL, CITY_NAME : NULL은 널을 : area_list AREA_NAME : NULL, addressCity : NULL, 멀티 어레이 [] // 입체 배열 데이터 multiIndex : [0, 0 0], // 기본 인덱스, selectProvinceId : 널 (null), selectCityId : 널 (null), selectAreaId : 널 (null), } 에 onLoad : 기능 (옵션) {//이 부하에 페이지가 호출됩니다 얻을 this.getProvince () }, // GET 지방 목록 getProvince : 함수 () { 송출 = 그이 wx.request ({// 웹 요청 URL : '' 데이터 : { parentId 0 // parentId parentId 지방이 0 인 일반 리스팅함으로써 취득 될 } 성공 (RES) { 배열로 provinceList = ... res.data.data] //하도록 하자 provinceArr = res.data.data.map ((항목) => { // item.name를 반환}) 이름 얻기 that.setData을 ({ 멀티 어레이는 : provinceArr [] [], // 최종 업데이트 입체 배열 [업데이트하는 [ '광', '베이징시] [] [] province_list : provinceList // 도립 원시 데이터 province_name : provinceArr // 모든 지방 이름 }) 송출 defaultCode that.data.province_list = [0]. 첫번째 파라미터 취득시 데이터로서 사용 // ID IF (defaultCode) { that.setData ({ // 현재 지역으로 저장 아이디 defaultCode : currnetProvinceId }) that.getCity (defaultCode) 도시 데이터를 가져옵니다 //은 } } }) } // ID시 교육청은 따라 얻을 getCity : 기능 (ID) { IF (ID) { 송출 = 다음은이 그 that.setData ({ currnetProvinceId : ID / / 지방은 ID ID가 도시 얻을 수있다 }) ({wx.request : ','URL을 데이터 : { parentId : ID }, 성공 (RES) { //을 console.log (res.data.data) 송출 cityArr = RES. data.data.map ((항목) => { // item.name를 반환}) 반환 도시의 이름 cityList을하자 = [... res.data.data] {that.setData ( 멀티 어레이 : [that.data.province_name, cityArr, [ ], 업데이트 // 후 [[ '광동', '베이징'], [ '조', '산 터우', 'Jieyang의'], []] CITY_LIST : CityList // 데이터시 유지 cityArr // 도시 이름 : CITY_NAME을 }) 송출 defaultCode that.data.city_list = [0] .ID // 첫 번째 도시 지구 수준의 데이터 가져 오기 IF (defaultCode) { that.setData ( { currentCityId가 : defaultCode 현재 도시 ID 저장 // }) that.getArea이 (defaultCode가) //이 영역의 데이터를 수집 } } )} } } 지역 얻을 // 의 getArea : 기능 (ID) { IF (ID) { 송출 것을이 = that.setData ({ currentCityId : 현재 선택된 도시 아이디 저장 // )} wx.request ({ URL : '' 데이터 : { parentId : ID }, 성공 (RES) { //을 console.log (res.data.data) 송출 areaList = [ res.data.data ...] areaArr res.data.data.map = 보자 ((항목) => {}에 대해 item.name을 반환) // 지역 이름 that.setData ({ 멀티 어레이 : [that.data.province_name, that.data.city_name, areaArr, area_list : areaList, // 영역 목록 AREA_NAME : areaArr // 영역 이름 }) } }) } } // 선택기 확인 선택 영역 bindRegionChange : 함수 (E) { multiIndex : e.detail.value // 업데이트 첨자 베이징은 하나 개의 옵션이기 때문에 //에없는 얻을 베이징 "베이징"을 선도, 지방을 얻을 경우 (e.detail.value [1] == 널 || e.detail.value [2] == NULL) {//如果只滚动了第一列则选取第一列的第一数据 this.setData ( { multiIndex : e.detail.value //更新下标 addressCity. [this.data.province_list [e.detail.value [0] 이름 this.data.city_list [0] .name과, this.data. area_list [0] .name과, selectProvinceId :. this.data.province_list [e.detail.value [0] 이드 selectCityId : this.data.city_list [0] .ID, selectAreaId : this.data.area_list [0 ] .ID }) 한다} else { this.setData ({ addressCity [this.data.province_list [e.detail.value [0] 이름 this.data.city_list [e.detail.value [1].. 이름 this.data.area_list [e.detail.value [2]. 이름, selectProvinceId :. this.data.province_list [e.detail.value [0] ID, selectCityId :. this.data.city_list [e.detail.value [1] ID, selectAreaId : this.data.area_list [E. detail.value [2] ID. }) } // CONSOLE.LOG (this.data.selectProvinceId, this.data.selectCityId, this.data.selectAreaId) } //滑动地区组件 bindRegionColumnChange : 함수 (E) { //을 console.log (e.detail.column, e.detail.value) 이이 =하자 =하자 열을 e.detail.column //当前改变的列 = {데이터하자 multiIndex : (that.data JSON.parse (JSON.stringify. multiIndex)), 멀티 어레이 : JSON.parse (JSON.stringify (that.data.multiArray)) } data.multiIndex [칼럼] = e.detail.value // 갱신 부 그의 여러 multiIndex 여러 칼럼에 대응 변경 스위치 (열) { 케이스 0 : // 첫 번째 열을 변경 성 변화 하게 currentProvinceId = that.data.province_list [e.detail.value] .ID IF (currentProvinceId! = that.data.currentProvinceId) {// 업데이트되지 않습니다 현재 ID를 분석 that.getCity (currentProvinceId)가시에 현재의 ID를 가져 // 데이터 } data.multiIndex = 0 // 제 기본 선택시 [1.] BREAK 사례 1 :. // 두 번째 열을 변경시 변경 하도록 currentCityId = that.data.city_list [e.detail.value] .ID IF (currentCityId! = that.data.currentCityId) { BREAK } that.getArea (currentCityId) // 가져 지역 } Data.multiIndex [2] = 0 // 기본 1 영역 that.setData (데이터) // 갱신 데이터 } })
좋은 일을하고 이러한 간단한 선택 도시