¿Cómo pueden los miniprogramas de WeChat expandir y retraer contenido libremente?
Ver una demanda puede ser útil para algunos principiantes en front-end o personas que recién comienzan a escribir programas pequeños. El efecto es el siguiente:
Ese es el efecto anterior. Sin embargo, aquí está el efecto. Código
wxml:
contenido: 2-1 contenido',
Tiempo: '2017-05-06'
}, {
itemName: sublista 2-2',
contenido: contenido en 2-2',
Hora: '2015-08-06'
}, {
nombre del elemento: Sublista 2-3',
contenido: 'Contenido en 2
-3',
hora: '2015-11-06'
}]
}, {
listName: Lista 3 ',
artículo: {
nombre del artículo: sublista 3-1',
contenido: contenido en 3-1',
Hora: '2015-05-15'
}, {
itemName: sublista 3-2',
contenido: 3-2 Contenido',
Hora: '2015-05-24'
}, {
nombre del elemento: sublista 1-3',
contenido：' Contenido en 3-3',
tiempo: '2015-05-30'
}]
}
]
},
//Haga clic en la lista más externa para expandirla y guardarla
listTap(e){
console.log ('Activado más externo');
let Index = e.currentTarget.dataset.parentindex,//obtener el valor del subíndice del clic
list = this .data.list;
list[Index].show = !list[Index].show || false;//transforma el estado de abierto, cerrado
if (list [Index].show) {//Si se expande al hacer clic, haga que las otras listas expandidas cambien a cerradas
this.packUp(list,Index);
}
this. setData({
list });
}
//Haga clic dentro para expandir y guardar la sublista
listItemTap (e){
let parentindex = e.currentTarget.dataset.parentindex,// el subíndice de la lista más externo donde se encuentra el nivel interno en el que se hizo clic
Index= e.currentTarget.dataset. index,//El índice interno de la capa interna en la que se hizo clic
list=this.data.list;
console.log(list[parentindex] .item,Index);
list[parentindex].item[Index].show = !list[parentindex].item[Index].show||false;// Convierte su estado abierto y cerrado
if ( list[parentindex].item[Index].show){//Si es el estado abierto de la operación, deje que otras listas del mismo nivel se cierren y siempre mantenga solo un estado abierto
para (sea i = 0, len = lista[parentindex].item.length;i<
len;i++ ){
if (i!= Índice){
lista[parentindex].item[i].show=false;
}
}
}
}
this.setData({list});
},
},
} p>
//Dejar que todos los elementos expandidos se conviertan en elementos cerrados
packUp(data,index){
for (let i = 0, len = data.display = false;
for (let j=0;j data[i] .item[j].show=false; } } } }, onLoad: función (opciones) { }, /** * Función de ciclo de vida - escucha para ver si se completa la representación inicial de la página */ onReady: function () { }: function () { }, /** *Función de ciclo de vida: escuche la visualización de la página */ onShow : función () { }, /** *Función de ciclo de vida: escucha si la página se oculta */ onHide: función () { }, /** * Función de ciclo de vida: escucha la descarga de la página **/ onUnload: función ( ) { }, /** * Controlador de eventos relacionados con la página - escucha la acción desplegable del Usuario */ onPullDownRefresh: función () { }, /** * Controlador de eventos desplegable de página */ onReachBottom: función ( ) { }, /** * El usuario hace clic en la esquina superior derecha para compartir */ onShareAppMessage:function () { } ) Autor: Enlaces:/artículo/30662 Fuente: mukai.com Este artículo se publicó originalmente en mukai. com. Por favor indique la fuente. Gracias por su cooperación.