Lista de productos WeChat vinculada a la izquierda y a la derecha del mini programa
He visto muchas demostraciones escritas por maestros en Internet. La barra de menú se basa principalmente en las letras A, B, C y D, es decir, la identificación (id) que llevan los elementos correspondientes. a las letras A, B, C y D. No pueden ser caracteres chinos ni números puros). La barra de menú del proyecto que estoy escribiendo ahora usa caracteres chinos, por lo que es necesario cambiar el formato de los datos y luego cambiar los métodos de anidamiento y adquisición del bucle wxml. El siguiente es el efecto de moldeo, espero que sea útil para los lectores.
La idea de implementar esta función: al hacer clic en un elemento en la barra deslizante izquierda, obtenga la identificación del elemento y luego páselo dinámicamente a la barra deslizante derecha para desplazarse hacia la vista. realizando así el derecho El movimiento del elemento correspondiente en la parte superior de la barra deslizante.
A continuación se muestran los datos completos
Formato de datos:
/*pages/listers/listers.wxss/
/pages/ list -1/list-1.wxss */
/ Cuadro maestro general /
.container {
posición: relativa;
ancho: 100%;
alto: 1220rpx;
color de fondo: #f0f4f7;
color: #939393;
}
/ Marco principal de la barra lateral izquierda /
.nav_left{
/ Establecer elemento de bloque en línea (no se utiliza posicionamiento) /
display: inline-block;
ancho: 100%;
alto: 100%;
/ Establece el color de fondo del marco principal en gris/
fondo: #fff;
alineación de texto: centro;
/* posición: fija /
izquierda: 0;
top: 0;
border-top: 1rpx solid #dedede;
}
/ Elementos en la lista de la barra lateral izquierda/
.nav_left .nav_left_items{
fondo: #fff;
/ Cada altura es 30px /
altura.80rpx;
/ Centrar verticalmente /
line-height: 80rpx;
/ Luego rellena la parte superior e inferior, aumentando la altura a un total de 42px /
relleno: 15rpx 0;
/ Dejar solo margen inferior/
borde inferior: 1px sólido #dedede;
/ Texto 14px /
tamaño de fuente: 29rpx;
color: #101010;
peso de fuente:
}
/ Seleccionado en la lista de la barra lateral izquierda Elementos/
.nav_left .nav_left_items.active{
/ Cambiar el color de fondo a blanco*
fondo: #f0f4f7;
color: #ed1000;
}
/ Marco principal de la barra lateral derecha/
.scroll_right{
/ Uso del marco de la barra lateral derecha Posicionamiento absoluto/
posición: fijo;
arriba: 0;
derecha: 0;
desbordamiento : auto;
flex: 1;
/ 75% de ancho, alto completo y diseño porcentual/
ancho: 75%;
altura: 100%;
relleno: 20rpx;
tamaño de la caja: border-box;
color de fondo: #f0f4f7;
borde superior: 1rpx sólido #dedede;
<p> }
.mink::after{
display:block;content:'';clear:both;
}
.jiul, imagen .jiul{
ancho: 100%;
alto: 170rpx;
}
.minl{
tamaño de fuente: 29rpx;
color: #777;
alineación de texto: izquierda;
altura de línea: 60rpx;
flotador: izquierda;
fondo: #f0f4f7;
ancho: 100%;
/* alto: 50rpx; /p>
}
.mink{
ancho: 100%;
fondo: #fff;
alto: 100%;
}
/ right_column_list_items /
.nav_right_items{
/ flotar hacia la izquierda /
float: left;
/ Cada elemento establece el ancho en 33,33% /
ancho: 50%;
/ alto: 160rpx /
<; p> text-align: center;color: #4a4a4a;
fondo: #fff;
}
.nav_right_items imagen {
/ El ancho y el alto los establece la imagen
ancho: 60px;
alto: 50px;