miniprogram picker
Release 1.0.7
bindcolumnchange para alterar manualmente os valores de range e value para concluir a alteração da vinculação do Picker. é bastante problemático e não conduz à duplicação no uso de diferentes lógicas de negócios.sourceData com uma estrutura de dados fixa e realizar algumas configurações necessárias. Este componente pode ajudar automaticamente os desenvolvedores a lidar com a lógica de ligação.2.2.1 ou superior e开发者工具1.02.1808300 ou superior, o miniprograma oferece suporte ao uso de npm para instalar pacotes de terceiros. 
| propriedade | ilustrar | tipo | valor padrão | É obrigatório? |
|---|---|---|---|---|
| fonteDados | Matriz de origem, sourceData tem várias dimensões e o Picker pode ter vários níveis. O formato deve ser uma coleção de arrays e objetos, veja o exemplo | Variedade | [] | verdadeiro |
| passos | Pedido do selecionador | Número | 1 | falso |
| mostradoFieldName | Nome do campo para exibir dados | Corda | 'nome' | falso |
| subconjuntoNomeCampo | O nome do campo do nó filho. O valor deste campo é a matriz de próximo nível do Picker. | Corda | 'subconjunto' | falso |
| outroNeedFieldsName | Os desenvolvedores podem customizar outros campos que precisam ser retornados de acordo com suas necessidades. | Variedade | [] | falso |
| índice padrão | A matriz de subscritos dos itens selecionados padrão, tendo precedência sobre defaultValue | Variedade | [] | falso |
| valor padrão | A matriz de valores do item selecionado padrão Quando esse atributo está habilitado, defaultValueUniqueField é obrigatório. | Variedade | [] | falso |
| defaultValueUniqueField | O único campo da matriz de valores do item selecionado padrão, usado para comparar com a matriz de origem | Corda | '' | - |
| seleção automática | Durante a inicialização, é necessário chamar automaticamente o evento bindchange para retornar os resultados ao desenvolvedor? | Booleano | falso | falso |
| initColumnSelectedIndex | Após a enésima coluna ser selecionada, se o valor selecionado da coluna maior que n é automaticamente inicializado como 0 | Booleano | falso | falso |
| desabilitado | Se desativar | Booleano | falso | falso |
| método | ilustrar | tipo | objeto de evento |
|---|---|---|---|
| alteração de ligação | Acionado quando o usuário clica em confirmar | EventHandle | event.detail = {selectedIndex, selectArray} |
| vincular cancelar | Dispara quando o usuário clica em cancelar | EventHandle | event.detail é o objeto de evento quando o bindcancel do componente nativo é acionado. |
| vincularcolumnchange | Acionado quando o valor de uma coluna muda quando o usuário a desliza | EventHandle | event.detail é o objeto de evento quando bindcolumnchange do componente nativo é acionado. |
sourceData é uma matriz de origem, que é uma coleção de estruturas de objetos de matriz sourceData possui várias dimensões e o Picker pode ter vários níveis.steps , você precisa especificar explicitamente a ordem do selecionador. Por exemplo, para ligação de três níveis, defina steps: 3 .steps estiver definido como 3 , sourceData deverá atender a esta ordem.initColumnSelectedIndex for habilitado, a ferramenta de depuração do desenvolvedor falhará. No entanto, nenhum problema foi encontrado na máquina real até agora, portanto cabe ao desenvolvedor decidir se deve habilitá-lo ou não.bindchange :selectedIndex : array de índice das seleções do Picker;selectedArray : array de valores dos itens de seleção do Picker;bindchange , bindcancel , bindcolumnchange , disabled . Você pode verificar o código-fonte para obter detalhes. Instale o pacote miniprogram-picker .
Lembrete: Se você não quiser usar o npm, você também pode baixar diretamente o pacote de lançamento mais recente e colocá-lo nos
componentsdo projeto, assim como usar componentes escritos por você, mas o npm é mais conveniente.
npm install miniprogram-picker --production
// 或者
npm install miniprogram-picker --save Clique na barra de menu em Ferramentas de desenvolvedor do WeChat: Ferramentas -> Construir npm. Neste momento, você descobrirá que existe um diretório miniprogram_npm adicional no projeto, que contém o miniprogram-picker compilado.
O componente de terceiros miniprogram-picker é introduzido em .json . O método de uso é o mesmo que usar seus próprios componentes encapsulados, exceto que você não precisa escrever o caminho específico, o que é muito conveniente.
{
"usingComponents" : {
"miniprogram-picker" : " miniprogram-picker "
}
} Use miniprogram-picker em .wxml . Dou dois pequenos exemplos aqui, o primeiro é uma ligação de três níveis e o segundo é uma ligação de dois níveis. Para atributos e métodos de eventos específicos, consulte a API.
miniprogram-pickernão possui nenhum estilo. Os desenvolvedores podem personalizar o estilo específico. Seria melhor se você estivesse familiarizado com o uso doslot. Para obter detalhes, consulte o slot do componente do 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 > Defina sourceData e ouça eventos pickerChange em .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 )
} ,
} ) Configuração simples de estilos em .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;
}
