도시 선택의 애플릿 사용자 지정 목록

우리가 공식 셀렉터 도시의 많은의 사용을 용이하게하는 작은 프로그램을 개발,하지만 때로는 우리가 선택기 도시의 자신의 세트를 작성해야하는 경우,

우리는 도시 코드에,별로 말, 백 엔드에 대응, 후 공정의 편의를 도시 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 (데이터) // 갱신 데이터 
  } 
})

　　좋은 일을하고 이러한 간단한 선택 도시