Desenvolvimento do WeChat: implementação de efeitos de tabs (tabs) usando js

Recentemente, o WeChat Mini Program está muito quente, cheio de popularidade, mas também pode ser observado que ao buscar palavras-chave, a maioria dos sites que aparecem ainda são explicações oficiais do WeChat. Justamente na onda dessa onda, nos últimos dias, antes de ver a documentação técnica do Mini Program, comecei a escrever casos. Muitos componentes já foram encapsulados internamente pelo WeChat, e exatamente descobri que não há efeito de guia de opção, nos últimos dois dias, estou pesquisando. A idéia é a seguinte:　

1、Quando clicar no navegador, precisamos de duas variáveis, uma para armazenar a classe de estilo atual clicada e outra para a classe de estilo padrão dos outros navegadores

2、A lista de conteúdo da guia também precisa de duas variáveis, uma para armazenar o bloco atual exibido e outra para armazenar o bloco oculto padrão

3、Usar a operação condicional ternária para obter o índice de navegação ao clicar, julgar se adicionar a classe atual com base no índice [Nota: Aqui, eu vinculei o evento de clique ao nível superior da barra de navegação, obtendo o objeto de evento desencadeado pelo clique pelo objeto target]

Por favor, combine com a seguinte imagem:

A seguir, veja diretamente o código-fonte:

demo.wxml：

<view class="tab"> 
 <view class="tab-left" bindtap="tabFun"> 
 <view class="{{tabArr.curHdIndex=='0'? 'active' : ''}}" id="tab-hd01" data-id="0">tab-hd01</view> 
 <view class="{{tabArr.curHdIndex=='1"? 'active' : ''}}" id="tab-hd02" data-id="1">tab-hd01</view> 
 <view class="{{tabArr.curHdIndex=='2"? 'active' : ''}}" id="tab-hd03" data-id="2">tab-hd01</view> 
 <view class="{{tabArr.curHdIndex=='3"? 'active' : ''}}" id="tab-hd04" data-id="3">tab-hd01</view> 
 </view> 
 <view class="tab-right"> 
 <view class="right-item {{tabArr.curBdIndex=='0'? 'active' : ''}}">tab-bd01</view> 
 <view class="right-item {{tabArr.curBdIndex=='1"? 'active' : ''}}">tab-bd02</view> 
 <view class="right-item {{tabArr.curBdIndex=='2"? 'active' : ''}}">tab-bd03</view> 
 <view class="right-item {{tabArr.curBdIndex=='3"? 'active' : ''}}">tab-bd04</view> 
 </view> 
</view> 

demo.js：

Page( { 
 data: { 
 tabArr: { 
 curHdIndex: 0, 
 curBdIndex: 0 
 }, 
 }, 
 tabFun: function(e){ 
 //Obter o atributo dataset do componente que desencadeou o evento 
 var _datasetId=e.target.dataset.id; 
 console.log("----"+_datasetId+"----"); 
 var _obj={}; 
 _obj.curHdIndex=_datasetId; 
 _obj.curBdIndex=_datasetId; 
 this.setData({}} 
 tabArr: _obj 
 }); 
 }, 
 onLoad: function( options ) { 
 alert( "------" ); 
 } 
}); 

demo.wxss：

.tab{ 
 display: flex; 
 flex-direction: row; 
} 
.tab-left{ 
 width: 200rpx; 
 line-height: 160%; 
 border-right: solid 1px gray; 
} 
.tab-left view{ 
 border-bottom: solid 1px red; 
} 
.tab-left .active{ 
 color: #f00; 
} 
.tab-right{ 
 line-height: 160%; 
} 
.tab-right .right-item{ 
 padding-left: 15rpx; 
 display: none; 
} 
.tab-right .right-item.active{ 
 display: block; 
} 

O efeito de demonstração final é o seguinte:

Aqui está apenas minha solução pessoal, se houver melhores soluções, por favor, sugira~

Este artigo foi organizado em 'Resumo de Dicas de Desenvolvimento WeChat JavaScript'. Bem-vindo a aprender e ler.

Recomendo um tutorial de mini-aplicativo WeChat com alta atenção atualmente: Tutorial de Desenvolvimento de Mini-Aplicativo WeChat. O editor preparou cuidadosamente, espero que gostem.

Isso é tudo o que há no artigo, espero que ajude na sua aprendizagem, e espero que todos apoiem o tutorial de gritaria.

Declaração: O conteúdo deste artigo é de propriedade da Internet, pertence ao respectivo proprietário, foi contribuído e carregado voluntariamente pelos usuários da Internet, este site não possui direitos de propriedade, não foi editado manualmente e não assume responsabilidades legais relacionadas. Se você encontrar conteúdo suspeito de violação de direitos autorais, por favor, envie um e-mail para: notice#w3Declaração: O conteúdo deste artigo foi extraído da Internet, pertence ao respectivo proprietário, foi carregado voluntariamente pelos usuários da Internet, este site não possui direitos de propriedade, não foi editado manualmente e não assume responsabilidades legais relacionadas. Se você encontrar conteúdo suspeito de violação de direitos autorais, por favor, envie um e-mail para: notice#w