Directorio de artículos
1 evento
Los eventos son el método de comunicación desde la capa de representación hasta la capa lógica. A través de eventos, el comportamiento generado por el usuario en la capa de representación puede retroalimentarse a la capa lógica para el procesamiento comercial.
1.1 Eventos comúnmente usados en Mini Programas
1.2 Lista de atributos del objeto de evento
Cuando se activa la devolución de llamada del evento, se recibirá un evento de objeto de evento y sus propiedades detalladas se muestran en la siguiente tabla:
1.2.1 La diferencia entre target y currentTarget
target es el componente de origen que desencadenó el evento y currentTarget es el componente al que está vinculado el evento actual.
Cuando se hace clic en el botón interior, el evento de clic se propaga de forma burbujeante y también activa el controlador de eventos de pulsación de la vista exterior. (Evento burbujeante) En este punto, para la vista exterior:
e.target apunta al componente de origen que activa el evento, por lo tanto, e.target es el componente de botón interno
e.currentTarget apunta al componente que actualmente activa el evento, por lo tanto, e.currentTarget es el componente de vista actual
1.3 Sintaxis de bindtap
En el subprograma, no hay un evento de clic del mouse onclick en HTML, pero el evento de toque se usa para responder al comportamiento táctil del usuario.
Con bindtap, puede vincular eventos tap touch a componentes. La sintaxis es la siguiente:
<!--pages/list/list.wxml-->
<button type="primary" bindtap="btntap">按钮</button>
Defina la función de manejo de eventos correspondiente en el archivo .js de la página, y los parámetros del evento se reciben a través del evento de parámetro formal (generalmente abreviado como e):
// pages/list/list.js
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 页面对应的时间处理函数
*/
btntap(e) {
console.log(e)
}
})
1.4 Asignar valores a los datos en datos en el controlador de eventos
Al llamar al método this.setData(dataObject), los datos en los datos de la página se pueden reasignar.
<!--pages/list/list.wxml-->
<view>{
{count}}</view>
<button type="primary" bindtap="btntap">改变count</button>
// pages/list/list.js
Page({
/**
* 页面的初始数据
*/
data: {
count: 0
},
/**
* 页面对应的时间处理函数
*/
btntap(e) {
// 更改data中的数据
this.setData( {
// 要修改的数据项
// 获取页面的数据 this.data
count: this.data.count + 1
} )
}
})
clic de un botón
1.5 Transferencia de parámetros de eventos
El parámetro de evento que se pasa en el applet es especial y no es posible pasar parámetros para la función del controlador de eventos al vincular el evento.
Es decir, <button type="primary" bindtap="btntap(123)">改变count</button>el código no tendrá efecto.
Porque el applet tratará el valor del atributo de bindtap como el nombre del evento, lo que equivale a llamar a una función de procesamiento de eventos llamada btntap(123).
Puede proporcionar parámetros de atributos personalizados data-* para los componentes, donde * representa el nombre del parámetro.
<!--pages/list/list.wxml-->
<view>{
{count}}</view>
<button type="primary" bindtap="btntap" data-info="{
{21}}">改变count</button>
info se analizará como el nombre del parámetro
value 2 se analizará como el valor del parámetro
En la función de procesamiento de eventos, el valor del parámetro específico se puede obtener a través del nombre del parámetro event.target.dataset.
// pages/list/list.js
Page({
/**
* 页面的初始数据
*/
data: {
count: 0
},
/**
* 页面对应的时间处理函数
*/
btntap(e) {
console.log(e.target.dataset.info)
}
})
1.6 Formato de sintaxis de bindinput
En el applet, el evento de entrada responde al evento de entrada del cuadro de texto.
Con bindinput, puede vincular eventos de entrada a cuadros de texto.
<!--pages/list/list.wxml-->
<view>{
{count}}</view>
<button type="primary" bindtap="btntap" data-info="{
{21}}">改变count</button>
<input type="text" bindinput="iptinput"/>
/* pages/list/list.wxss */
input {
border: 1px solid black;
margin: 10px;
}
Defina controladores de eventos en el archivo .js de la página.
Para obtener el valor de entrada del cuadro de texto, use e.detail.value
// pages/list/list.js
Page({
/**
* 页面的初始数据
*/
data: {
count: 0
},
/**
* 页面对应的时间处理函数
*/
btntap(e) {
console.log(e.target.dataset.info)
},
iptinput(e) {
// 获取输入框的值
const value = e.detail.value
// 打印输入框的输入值
console.log(value)
//将输入框的值赋值给页面的数据变量，用于页面数据的渲染
this.setData({
count: value
})
}
})
