miniprogram picker
Release 1.0.7
bindcolumnchange para cambiar manualmente range y value para completar el cambio de enlace del Picker. bastante problemático y no favorece la duplicación en diferentes usos de lógica empresarial.sourceData una estructura de datos fija y realizar algunas configuraciones necesarias. Este componente puede ayudar automáticamente a los desarrolladores a manejar la lógica de vinculación.2.2.1 o superior y开发者工具1.02.1808300 o superior, el miniprograma admite el uso de npm para instalar paquetes de terceros. 
| propiedad | ilustrar | tipo | valor predeterminado | ¿Es necesario? |
|---|---|---|---|---|
| fuenteDatos | La matriz de origen, sourceData tiene varias dimensiones y Picker puede tener varios niveles. El formato debe ser una colección de matrices y objetos, consulte el ejemplo. | Formación | [] | verdadero |
| pasos | orden del selector | Número | 1 | FALSO |
| nombre del campo mostrado | Nombre del campo para mostrar datos | Cadena | 'nombre' | FALSO |
| subconjuntoNombreCampo | El nombre del campo del nodo secundario. El valor de este campo es la matriz del siguiente nivel de Picker. | Cadena | 'subconjunto' | FALSO |
| otros campos de necesidad Nombre | Los desarrolladores pueden personalizar otros campos que deben devolverse según sus necesidades. | Formación | [] | FALSO |
| índice predeterminado | La matriz de subíndices de los elementos seleccionados predeterminados, que tiene prioridad sobre defaultValue | Formación | [] | FALSO |
| valor predeterminado | La matriz de valores del elemento seleccionado predeterminado. Cuando este atributo está habilitado, se requiere defaultValueUniqueField. | Formación | [] | FALSO |
| valor predeterminadoCampo único | El único campo de la matriz de valores del elemento seleccionado predeterminado, utilizado para comparar con la matriz de origen. | Cadena | '' | - |
| selección automática | Durante la inicialización, ¿es necesario llamar automáticamente al evento bindchange para devolver los resultados al desarrollador? | Booleano | FALSO | FALSO |
| initColumnSelectedIndex | Después de seleccionar la enésima columna, si el valor seleccionado de la columna mayor que n se inicializa automáticamente a 0 | Booleano | FALSO | FALSO |
| desactivado | Si deshabilitar | Booleano | FALSO | FALSO |
| método | ilustrar | tipo | objeto de evento |
|---|---|---|---|
| cambio de enlace | Se activa cuando el usuario hace clic en confirmar | Identificador de evento | evento.detalle = {índice seleccionado, matriz seleccionada} |
| vincular cancelar | Se activa cuando el usuario hace clic en Cancelar | Identificador de evento | event.detail es el objeto de evento cuando se activa la cancelación de vinculación del componente nativo. |
| enlazar cambio de columna | Se activa cuando el valor de una columna cambia cuando el usuario la desliza | Identificador de evento | event.detail es el objeto de evento cuando se activa el cambio de columna del componente nativo. |
sourceData es una matriz de origen, que es una colección de estructuras de objetos de matriz sourceData tiene varias dimensiones y Picker puede tener varios niveles.steps , debe especificar explícitamente el orden del selector. Por ejemplo, para un enlace de tres niveles, establezca steps: 3 .steps se establecen en 3 , sourceData debe seguir este orden.initColumnSelectedIndex , la herramienta de depuración del desarrollador fallará. Sin embargo, hasta ahora no se ha encontrado ningún problema en la máquina real, por lo que depende del desarrollador decidir si habilitarlo o no.bindchange :selectedIndex : matriz de índice de selecciones del selector;selectedArray : matriz de valores de los elementos de selección del selector;bindchange , bindcancel , bindcolumnchange , disabled . Puede consultar el código fuente para obtener más detalles. Instale el paquete miniprogram-picker .
Recordatorio: si no desea utilizar npm, también puede descargar directamente el paquete de versión más reciente y colocarlo en
componentsdel proyecto, como si usara componentes escritos por usted mismo, pero npm es más conveniente.
npm install miniprogram-picker --production
// 或者
npm install miniprogram-picker --save Haga clic en la barra de menú en WeChat Developer Tools: Herramientas --> Construir npm. En este momento, encontrará que hay un directorio miniprogram_npm adicional en el proyecto, que contiene el miniprogram-picker compilado.
El componente de terceros miniprogram-picker se introduce en .json . El método de uso es el mismo que usar sus propios componentes encapsulados, excepto que no necesita escribir la ruta específica, lo cual es muy conveniente.
{
"usingComponents" : {
"miniprogram-picker" : " miniprogram-picker "
}
} Utilice miniprogram-picker en .wxml . Aquí doy dos pequeños ejemplos: el primero es un vínculo de tres niveles y el segundo es un vínculo de dos niveles. Para atributos específicos y métodos de eventos, consulte la API.
miniprogram-pickerno tiene ningún estilo. Los desarrolladores pueden personalizar el estilo específico. Sería mejor si estuviera familiarizado con el uso deslot. Para obtener más información, consulte la ranura del componente del miniprograma wxml.
< 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 > Configure sourceData y escuche los eventos pickerChange en .js .
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 )
} ,
} ) Configuración sencilla de estilos en .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;
}
