Tabla de contenido
1. Crea una nueva página 01-todolist
Ejemplo 2: bind:tap, wx:para recorrido
Ejemplo 3: atributos personalizados de H5
Ejemplos de uso de wx:if y wx:else
1. Crea una nueva página 01-todolist
2.
Proceso específico:
La página actual se encuentra en la ruta páginas/inicio/inicio.
3. En home.js, puede ver que la variable de lista definida en datos se importa desde el mismo directorio './data/index/'
4. La ruta correspondiente a la barra de navegación del módulo básico se encuentra en el mismo directorio.
4. Cree la página 01-todolist. En el primer paso, agregue el siguiente código a base.js:
5. Dado que la ruta URL buscada al recorrer la lista es la siguiente:
6. Siempre que cree una nueva carpeta 01-todolist y una página en la ruta de la página, la ruta correspondiente se reconocerá automáticamente.
2. etiqueta de entrada t, etiqueta de botón t
2.1 etiqueta de entrada t
2.1.1 Página 01-todolist.wxml
<!--pages/01-todolist/01-todolist.wxml-->
<text>pages/01-todolist/01-todolist.wxml</text>
<view class="box">
<t-input type="text" bind:change="handlechange"/>
<t-button theme="primary" size="large" loading class="margin" >add</t-button>
</view>Tenga en cuenta que el cambio se activa cuando cambia el cuadro de entrada.
enlazar:cambiar="manejarcambiar"
2.2 Página 01-todolist.json
2.3 Página 01-todolist.js
Definir evento de cambio de identificador
- e.detail.value obtiene el valor ingresado en el cuadro de entrada
- No escriba this.setData como this.setDate por error
- this.setData es para establecer las variables definidas en los datos
2.4 Página 01-todolist.wxss
2.2 etiqueta con botón en T
Ejemplo 1: vincular: cambiar
Haga clic en el botón Agregar para borrar el valor del cuadro de entrada y mostrarlo de forma acumulativa en la página.
- enlazar: evento de enlace de toque
- El valor de la etiqueta de entrada es hacer clic en el botón Agregar, borrar el valor del cuadro de entrada y mostrarlo en la página.
- No escriba value={ {inputValue}} sin comillas dobles .
-
<t-input type="text" bind:change="handlechange" value="{ {inputValue}}"/>
Ejemplo 2: bind:tap, wx:para recorrido
Haga clic en el botón Agregar para borrar el valor del cuadro de entrada y mostrarlo de forma acumulativa en la página, utilizando una matriz.
- Modificar lista de datos en this.setData({})
-
lista de datos:[ ...this.data.datalist , this.data.mychange ] ... this.data.datalist son datos expandidos
- No escribas this.datalist
- wx: para recorrido
- { {elemento}} valor
- wx:key="{ {index}}" ¡es incorrecto! { {}}=》wx:key="index" no debe agregarse
Ejemplo 3: atributos personalizados de H5
A partir de esta posición, eliminar un elemento
La página js es la siguiente:
- Lo que se implementa es hacer clic en eliminar y generar el subíndice del elemento atravesado actualmente.
- La atención se centra en e.target, no en e.detail.target
- Como se muestra en la figura, puede ver que el atributo personalizado data-myid se guarda en el conjunto de datos del objetivo.
La página wxml es la siguiente:
Función de implementación: haga clic para eliminar
- El punto clave es que e.target.dataset.Los nombres de atributos personalizados pueden tomar valores
- El método splice(m,i) de la matriz elimina i elementos a partir del índice m.
Ejemplos de uso de wx:if y wx:else
- Si el resultado de {{datalist.length>0}} es verdadero, se mostrarán los datos en la lista de datos.
- Si es falso, muestra "La lista está vacía".