miniprogram picker
Release 1.0.7
range 및 value 값을 수동으로 변경하기 위해 bindcolumnchange 이벤트를 모니터링해야 합니다. 매우 번거롭고 다른 비즈니스 논리 사용에 도움이 되지 않습니다.sourceData 에 고정된 데이터 구조를 제공하고 필요한 일부 구성만 수행하면 됩니다. 이 구성 요소는 개발자가 연결 논리를 처리하는 데 자동으로 도움이 됩니다.2.2.1 이상 및开发者工具1.02.1808300 이상에서 미니 프로그램은 npm을 사용하여 타사 패키지를 설치할 수 있도록 지원합니다. 
| 재산 | 설명하다 | 유형 | 기본값 | 필수인가요? |
|---|---|---|---|---|
| 소스데이터 | 소스 배열, sourceData에는 여러 차원이 있고 Picker에는 여러 수준이 있을 수 있습니다. 형식은 배열과 객체의 컬렉션이어야 합니다. 예제를 참조하세요. | 정렬 | [] | 진실 |
| 단계 | 피커의 주문 | 숫자 | 1 | 거짓 |
| 표시 필드 이름 | 데이터를 표시할 필드 이름 | 끈 | '이름' | 거짓 |
| 하위 집합필드 이름 | 하위 노드의 필드 이름입니다. 이 필드의 값은 Picker의 다음 수준 배열입니다. | 끈 | '하위 집합' | 거짓 |
| otherNeedFields이름 | 개발자는 필요에 따라 반환해야 하는 다른 필드를 사용자 정의할 수 있습니다. | 정렬 | [] | 거짓 |
| 기본 인덱스 | 기본 선택 항목의 아래 첨자 배열은 defaultValue보다 우선합니다. | 정렬 | [] | 거짓 |
| 기본값 | 기본 선택 항목의 값 배열입니다. 이 속성이 활성화되면 defaultValueUniqueField가 필요합니다. | 정렬 | [] | 거짓 |
| defaultValueUniqueField | 기본 선택 항목의 값 배열의 유일한 필드로, 소스 배열과 비교하는 데 사용됩니다. | 끈 | '' | - |
| 자동선택 | 초기화 중에 개발자에게 결과를 반환하기 위해 자동으로 바인딩 변경 이벤트를 호출해야 합니까? | 부울 | 거짓 | 거짓 |
| initColumnSelectedIndex | n번째 컬럼 선택 후, n보다 큰 컬럼의 선택된 값이 자동으로 0으로 초기화되는지 여부 | 부울 | 거짓 | 거짓 |
| 장애가 있는 | 비활성화 여부 | 부울 | 거짓 | 거짓 |
| 방법 | 설명하다 | 유형 | 이벤트 객체 |
|---|---|---|---|
| 바인드체인지 | 사용자가 확인을 클릭하면 트리거됩니다. | 이벤트 핸들 | event.detail = {selectedIndex, selectedArray} |
| 바인딩취소 | 사용자가 취소를 클릭하면 실행됩니다. | 이벤트 핸들 | event.detail은 네이티브 구성 요소의 바인딩 취소가 트리거될 때 이벤트 개체입니다. |
| 바인드컬럼변경 | 사용자가 열을 슬라이드할 때 열 값이 변경되면 트리거됩니다. | 이벤트 핸들 | event.detail은 네이티브 구성 요소의 바인딩 열 변경이 트리거될 때 이벤트 개체입니다. |
sourceData 는 배열 객체 구조의 모음인 소스 배열입니다. sourceData 여러 차원을 가지며 Picker는 여러 수준을 가질 수 있습니다.steps 경우 선택기 순서를 명시적으로 지정해야 합니다. 예를 들어 3단계 연결의 경우 steps: 3 설정합니다.steps 3 으로 설정된 경우 sourceData 이 순서를 충족해야 합니다.initColumnSelectedIndex 속성이 활성화된 후에는 개발자 디버깅 도구가 실패하게 됩니다. 그러나 실제 시스템에서는 아직까지 아무런 문제도 발견되지 않았으므로 활성화 여부를 결정하는 것은 개발자의 몫입니다.bindchange 에 의해 트리거된 이벤트 객체:selectedIndex : Picker 선택 항목의 인덱스 배열입니다.selectedArray : Picker 선택 항목의 값 배열입니다.bindchange , bindcancel , bindcolumnchange , disabled ). 자세한 내용은 소스코드를 확인하실 수 있습니다. miniprogram-picker 패키지를 설치합니다.
알림: npm을 사용하고 싶지 않다면 직접 작성한 컴포넌트를 사용하는 것처럼 최신 릴리스 패키지를 직접 다운로드하여 프로젝트의
components에 넣을 수도 있지만 npm이 더 편리합니다.
npm install miniprogram-picker --production
// 或者
npm install miniprogram-picker --save WeChat 개발자 도구: 도구 --> npm 빌드에서 메뉴 표시줄을 클릭합니다. 이때 프로젝트에는 컴파일된 miniprogram-picker 포함된 추가 miniprogram_npm 디렉터리가 있음을 알 수 있습니다.
miniprogram-picker 타사 구성 요소 .json 에 도입되었습니다. 사용 방법은 특정 경로를 작성할 필요가 없다는 점을 제외하면 자체 캡슐화된 구성 요소를 사용하는 것과 동일하므로 매우 편리합니다.
{
"usingComponents" : {
"miniprogram-picker" : " miniprogram-picker "
}
} .wxml 에서 miniprogram-picker 사용하세요. 여기서는 두 가지 작은 예를 들겠습니다. 첫 번째는 3단계 연결이고 두 번째는 2단계 연결입니다. 구체적인 속성 및 이벤트 메소드에 대해서는 API를 참조하세요.
miniprogram-picker스타일이 없으므로 개발자가 특정 스타일을 맞춤 설정할 수 있습니다. 자세한 내용은 미니 프로그램 구성 요소slot의 슬롯을 참조하세요.
< miniprogram-picker
sourceData = " {{sourceData_1}} "
steps = " {{3}} "
shownFieldName = " {{'name'}} "
subsetFieldName = " {{'sonValue'}} "
otherNeedFieldsName = " {{['id', 'other']}} "
defaultValue = " {{[{name: '2'}, {name: '2.2'}, {name: '2.2.1'}]}} "
defaultValueUniqueField = " {{'name'}} "
autoSelect = " {{true}} "
initColumnSelectedIndex
disabled = " {{false}} "
bindchange = " pickerChange "
bindcancel = " pickerCancel "
bindcolumnchange = " pickerColumnchange "
data-picker = " picker_1 " >
< view class = " picker " >
当前选择：< view wx : for = " {{result_1}} " wx : key = " index " >{{item['name']}}</ view >
</ view >
</ miniprogram-picker >
< miniprogram-picker
sourceData = " {{sourceData_2}} "
steps = " {{2}} "
shownFieldName = " {{'name'}} "
subsetFieldName = " {{'nextLevel'}} "
otherNeedFieldsName = " {{['code']}} "
defaultValue = " {{[{code: '0110'}, {code: '011002'}]}} "
defaultValueUniqueField = " {{'code'}} "
autoSelect = " {{true}} "
initColumnSelectedIndex
disabled = " {{false}} "
bindchange = " pickerChange "
bindcancel = " pickerCancel "
bindcolumnchange = " pickerColumnchange "
data-picker = " picker_2 " >
< view class = " picker " >
当前选择：< view wx : for = " {{result_2}} " wx : key = " index " >{{item['name']}}</ view >
</ view >
</ miniprogram-picker > sourceData 설정하고 .js 에서 pickerChange 이벤트를 수신합니다.
Page ( {
/**
* 页面的初始数据
*/
data : {
result_1 : [ ] ,
result_2 : [ ] ,
sourceData_1 : [
{
id : 'id-1' ,
name : '1' ,
sonValue : [
{
id : 'id-11' ,
name : '1.1' ,
sonValue : [
{ id : 'id-111' , name : '1.1.1' } ,
{ id : 'id-112' , name : '1.1.2' }
]
} ,
{
id : 'id-12' ,
name : '1.2' ,
sonValue : [
{ id : 'id-121' , name : '1.2.1' } ,
{ id : 'id-122' , name : '1.2.2' }
]
}
]
} ,
{
id : 'id-2' ,
name : '2' ,
sonValue : [
{
id : 'id-21' ,
name : '2.1' ,
sonValue : [
{ id : 'id-211' , name : '2.1.1' } ,
{ id : 'id-212' , name : '2.1.2' }
]
} ,
{
id : 'id-22' ,
name : '2.2' ,
sonValue : [
{ id : 'id-221' , name : '2.2.1' } ,
{ id : 'id-222' , name : '2.2.2' }
]
}
]
}
] ,
sourceData_2 : [
{ name : '河北' , code : '0311' , nextLevel : [ { name : '石家庄' , code : '031101' } , { name : '保定' , code : '031102' } ] } ,
{ name : '北京' , code : '0110' , nextLevel : [ { name : '朝阳' , code : '011001' } , { name : '海淀' , code : '011002' } ] } ,
]
} ,
/**
* Picker用户点击确认时触发
*
* @param {Object} e pickerChange的事件对象
* @param {Object} e.detail.selectedIndex 用户选择的数据在数组中所在的下标
* @param {Object} e.detail.selectedArray 用户选择的数据
*/
pickerChange ( e ) {
const { picker } = e . currentTarget . dataset
const { selectedIndex , selectedArray } = e . detail
const list = {
picker_1 : 'result_1' ,
picker_2 : 'result_2' ,
}
console . log ( '多级联动结果:' , selectedIndex , selectedArray )
const change = { }
change [ list [ picker ] ] = selectedArray
this . setData ( change )
} ,
/**
* Picker用户点击取消时触发
*
* @param {Object} e pickerCancel的事件对象
* @param {Object} e.detail 是原生Picker组件的bindcancel触发时的事件对象e
*/
pickerCancel ( e ) {
console . log ( e )
} ,
/**
* Picker用户滑动某一列的值改变时触发
*
* @param {Object} e pickerColumnchange的事件对象
* @param {Object} e.detail 是原生Picker组件的bindcolumnchange触发时的事件对象e
*/
pickerColumnchange ( e ) {
console . log ( e )
} ,
} ) .wxss 의 간단한 스타일 설정.
. picker {
display : flex;
flex-direction : row;
align-items : center;
margin : 10 rpx 0 ;
padding : 10 rpx 0 ;
background-color : # DEECE2 ;
font-size : 28 rpx ;
}
. picker view {
padding : 2 rpx 10 rpx ;
margin-left : 10 rpx ;
margin-right : 10 rpx ;
border-bottom : 2 rpx solid aqua;
}
