Desarrollo de WeChat: implementación de efectos de tabs de opción utilizando js

Recientemente, el número de aplicaciones de WeChat está muy caliente, lleno de popularidad, pero también se puede descubrir que las palabras clave de búsqueda aparecen, los sitios web que aparecen son todos la explicación oficial de WeChat. Justo a tiempo para esta ola de popularidad, estos días primero vi el documento técnico de la aplicación de小程序, y luego me puse a escribir casos. Muchos componentes ya están encapsulados internamente por WeChat, justo descubrí que no hay efecto de pestaña de opción, estos días he investigado. La idea es la siguiente:　

1、Al hacer clic en la navegación por primera vez, se necesitan dos variables, una para almacenar la clase de estilo actual y otra para las clases de estilo predeterminadas de otros navegadores

2、La lista de contenido de la pestaña también necesita dos variables, una para almacenar el bloque que se muestra actualmente, y una para otros bloques ocultos por defecto

3、Utilice la operador ternario para obtener el índice de navegación al hacer clic, según el índice, juzgue si agregar la clase actual【Nota: Aquí he vinculado el evento de clic en el nivel superior de la barra de navegación, a través del objeto target obtener las propiedades del objeto de evento que desencadena el clic】

Por favor, combínelo con la siguiente imagen:

A continuación, consulte directamente el código fuente:

demo.wxml：

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

demo.js：

Page( { 
 data: { 
 tabArr: { 
 curHdIndex: 0, 
 curBdIndex: 0 
 }, 
 }, 
 tabFun: function(e){ 
 //Obtener la propiedad dataset del componente que desencadena el 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; 
} 

El efecto de demostración final es el siguiente:

Esto es solo mi plan personal, si tienes una mejor solución, ¡sé bienvenido a sugerirla~

Este artículo se ha recopilado en 'Resumen de técnicas de desarrollo de WeChat con JavaScript'. Todos son bienvenidos a aprender y leer.

Le recomendamos un tutorial de miniprograma de WeChat muy popular en la actualidad: 'Tutorial de desarrollo de miniprograma de WeChat'. El editor lo ha organizado con mucho cuidado, esperamos que les guste.

Esto es todo el contenido de este artículo, esperamos que sea útil para su aprendizaje y que todos nos apoyen en el tutorial de alarido.

Declaración: Este artículo se ha recopilado de la red, el copyright pertenece al propietario original, el contenido se contribuye y carga de manera autónoma por los usuarios de Internet, este sitio web no posee los derechos de propiedad, no se ha procesado editorialmente y no asume la responsabilidad legal correspondiente. Si encuentra contenido sospechoso de copyright, le invitamos a enviar un correo electrónico a: notice#w para informar, y proporcionar evidencia relevante.3Declaración: El contenido de este artículo se obtiene de la red, el copyright pertenece al propietario original, el contenido se contribuye y carga de manera autónoma por los usuarios de Internet, este sitio web no posee los derechos de propiedad, no se ha procesado editorialmente y no asume la responsabilidad legal correspondiente. Si encuentra contenido sospechoso de copyright, le invitamos a enviar un correo electrónico a: notice#w para informar, y proporcionar evidencia relevante. Una vez verificada, este sitio eliminará inmediatamente el contenido sospechoso de infracción.