Análise do componente yPicker personalizado do miniaplicativo WeChat e realização de ligação de três níveis entre províncias e cidades

Desde o último artigo: componentes de calendário personalizados do miniaplicativo WeChat e a última linha de problemas de alinhamento de layout flexível foram analisados , alguém conversou em particular e me perguntou se eu poderia analisar meus componentes personalizados de código aberto desde o início. Não houve tempo. Isso não, há uma demanda no projeto recente é a ligação de três províncias , meu primeiro a caminho "da extensão da biblioteca de componentes selecionador de data - hora (Clique aqui para acessar diretamente o GitHub, estrela de boas-vindas) " a montagem começou a dizer sobre isso A realização de duas funções.

Diga brevemente "componentes personalizados de data e hora"

Seu pano de fundo é que a primeira versão do projeto descobriu que o componente de data integrado do miniaplicativo WeChat: selecionador pode ser preciso apenas para um determinado dia (ano, mês, dia), mas muitas vezes precisamos de ano, mês, dia, hora e até mesmo ano, mês, dia, hora, minuto e segundo (como Hora de término / hora de liberação).
yPicker

O autor examinou cuidadosamente os documentos oficiais e muitos artigos de blogueiros e descobriu que várias soluções foram propostas (mas infelizmente nenhum blogueiro divulgou o código em detalhes), mas não há necessidade de "ligação" e o número de colunas para tal Para funções não fixas, use um seletor de várias colunas para simular um seletor de várias colunas .

<picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{
     
     {multiIndex}}" range="{
     
     {multiArray}}">
	<input value='{
     
     {time}}' readonly="" disabled="true" placeholder='{
     
     {defaulttext}}' />
</picker>

Qual readonly="" disabled="true"é a função do "teclado virtual de entrada não aparece quando o foco" (ação de duas propriedades, pois são escritas por causa de problemas de compatibilidade com Android e iOS).

Use input em vez de view porque o placeholder de input facilita o efeito de "prompt por default quando não selecionado".

Estratégia de implementação principal

Conforme mostrado acima, dois eventos são monitorados: quando a janela de seleção de data é exibida e quando o botão "OK" é clicado, a mudança de função é acionada e a mudança de coluna do evento é acionada quando cada coluna no seletor de várias colunas desliza.

a mudança é muito simples: só precisa ser exposto à página de dados selecionada (ou pelo triggerEventretorno à página de chamada) pode ser;
O que fazer em columnchange é preencher o valor de cada coluna atualmente selecionada em um item da matriz correspondente em dados. Por exemplo: e.detail.column==1Hora significa que o deslizamento atual é a segunda coluna (mês). Neste momento, é necessário julgar quantos dias de cada mês:

if (e.detail.column == 1) {
    
    
     let num = parseInt(this.data.multiArray[e.detail.column][e.detail.value]);
     let temp = [];
     if (num == 1 || num == 3 || num == 5 || num == 7 || num == 8 || num == 10 || num == 12) {
    
     //判断31天的月份
       for (let i = 1; i <= 31; i++) {
    
    
         if (i < 10) {
    
    
           i = "0" + i;
         }
         temp.push("" + i);
       }
       this.setData({
    
    
         ['multiArray[2]']: temp   //第三列天数更新（根据月份）
       });
    }
}

Nota: O componente seletor de várias colunas monitora dois parâmetros: multiArray e multiIndex, ambos são arrays!
multiArray é usado principalmente para indicar o monitoramento de várias colunas, e seus elementos são arrays, tais como: [years, months, days, hours, minutes]
multiIndex é o valor inicial de cada coluna (quando ela é clicada)! Por exemplo: [10, meng_date.getMonth(), meng_date.getDate()-1, meng_date.getHours(), meng_date.getMinutes()]
De modo geral, o valor em multiIndex também é usado como o segundo índice ao buscar elementos em multiArray!

Fale sobre a realização da ligação de três níveis entre províncias e cidades

Envie o arquivo da lista de cidades primeiro: (download gratuito para sempre)

ligação	Código de extração
https://pan.baidu.com/s/1z4ZfOWnAG2zVaGfxXxpF9Q	j3m3

Ao usar, ele pode ser importado da seguinte forma: (é um arquivo citysearch.js)

import placeArrays from 'citysearch文件路径';
const placeArray=placeArrays.placeArray

cidades

Começar oficialmente

Eu me pergunto se você nunca usou antes ou ouviu a picker-viewposição de montagem do miniaplicativo : página do seletor de rolagem incorporada .
Possui três parâmetros:

parâmetro	Tipos de	Descrição
valor	Matriz de números	Os números na matriz indicam o número de itens selecionados por picker-view-colume em picker-view (o subscrito começa em 0). Quando o número é maior que o comprimento da opção de picker-view-coluna, o último item é selecionado.
estilo de indicador	Corda	Defina o estilo da caixa de seleção no meio do seletor
bindchange	EventHandle	Ao rolar a seleção, o evento de mudança é acionado quando o valor muda. O `event.detail = {value: value}`valor é uma matriz, indicando qual item está atualmente selecionado na coluna de visualização do seletor na visualização do seletor (o subscrito começa em 0)

Deve-se notar que apenas <picker-view-column/>componentes podem ser colocados nele , outros nós não serão exibidos, e a altura de seus nós filhos será automaticamente definida para ser igual à altura da caixa de seleção do selecionador-view.

Com esse componente, podemos pensar em: definir três componentes de visualização do seletor em uma visualização pop-up e colocar um componente de visualização do seletor em cada componente para exibir a coluna atual?

Você também pode colocar apenas um número no valor (normalmente você pode colocar o subscrito do elemento da matriz), e o picker-view irá convertê-lo automaticamente para [下标值]

como isso:

<view style="width:100%;position:fixed;bottom:0;left:0;z-index:10000;height:500rpx;background-color:white">
  <!-- 仿原生picker的“确定”和“取消”按钮 -->
  <view style="display:flex;width:100%;height:100%">
    <view
      style="position: absolute;top:0;width:100%;height:100rpx;z-index:1000000;display:flex;justify-content:space-between;align-items:center;">
      <view style="width:calc(100% / 3);text-align:center;color:rgba(0,0,0,.6);font-size:39rpx" bindtap="displayer">取消
      </view>
      <view style="width:calc(100% / 3);text-align:center;color:rgb(63,142,255);font-size:39rpx" bindtap="confirm">确定
      </view>
    </view>
    
    <picker-view indicator-style="height: 200rpx;"
      style="width: 100%;height: 300rpx;text-align: center;margin-top:150rpx" value="{
     
     {pIndex}}"
      bindchange="changeProvince">
      <picker-view-column>
        <view wx:for="{
     
     {placeArray}}" wx:key="name" style="line-height: 77rpx">{
   
   {item.name}}</view>
      </picker-view-column>
    </picker-view>
    <picker-view indicator-style="height: 200rpx;"
      style="width: 100%;height: 300rpx;text-align: center;margin-top:150rpx" value="{
     
     {cIndex}}"
      bindchange="changeCity">
      <picker-view-column>
        <view wx:for="{
     
     {placeArray[pIndex].city}}" wx:key="name" style="line-height: 77rpx">{
   
   {item.name}}</view>
      </picker-view-column>
    </picker-view>
    <picker-view indicator-style="height: 200rpx;"
      style="width: 100%;height: 300rpx;text-align: center;margin-top:150rpx" value="{
     
     {aIndex}}"
      bindchange="changeArea">
      <picker-view-column>
        <view wx:for="{
     
     {placeArray[pIndex].city[cIndex].area}}" wx:key="*this" style="line-height: 77rpx">{
   
   {item}}
        </view>
      </picker-view-column>
    </picker-view>
    
  </view>
</view>

Como você pode ver, a única coisa que cada picker-view-column faz é percorrer uma coluna fixa (uma matriz) e renderizá-la.
city_picker

// js-data
data:{
    
    
	placeArray: placeArray,
    province: "",//placeArray[0].name - 省
    pIndex: 0,
    city: "",//placeArray[0].city[0].name - 市
    cIndex: 0,
    area: "",//placeArray[0].city[0].area[0] - 区
    aIndex: 0,
}

Em seguida, uma função de alteração é vinculada a cada coluna (picker-view) no wxml acima, acionada ao deslizar:

changeProvince: function(e){
    
    
  const val = e.detail.value
  this.setData({
    
    
    pIndex: val,
    cIndex: 0,
    aIndex: 0,
    province: placeArray[val].name,
    city: placeArray[val].city[0].name,
    area: placeArray[val].city[0].area[0]
  })
},
changeCity: function(e){
    
    
  const val = e.detail.value
  this.setData({
    
    
    cIndex: val,
    aIndex: 0,
    city: placeArray[this.data.pIndex].city[val].name,
    area: placeArray[this.data.pIndex].city[val].area[0]
  })
},
changeArea: function(e){
    
    
  const val = e.detail.value
  this.setData({
    
    
    aIndex: val,
    area: placeArray[this.data.pIndex].city[this.data.cIndex].area[val]
  })
},

Sua função é expor os elementos selecionados da coluna de seleção atual (elementos que aparecem no campo de visão de estilo de indicador) para a página e posicionar os subscritos aqui - de modo que possam ser abertos a partir daqui quando a página não for atualizada na próxima vez. Comece a procurar!
Então, o ponto mais importante é: quando o deslizamento parar, reposicione as outras duas colunas de dados na primeira!

—— Claro, você também pode escolher colocar vários componentes de coluna de exibição de seletor em uma exibição de seletor. Desta forma, assim como o seletor de várias colunas acima, vários arrays são necessários para transferir dados!