微信小程序如何用一个bindinput绑定多个事件名字
时间: 2023-07-16 13:16:46 浏览: 126
在微信小程序中,一个 `bindinput` 绑定只能绑定一个事件名字,但你可以通过编写自定义组件的方式来实现一个 `bindinput` 绑定多个事件名字。
具体步骤如下:
1. 在 `component` 文件夹下创建一个自定义组件,例如 `multi-input`
2. 在 `multi-input` 组件的 wxml 文件中添加多个 `input` 标签,并分别绑定不同的事件名字,例如:
```html
<input bindinput="onInput1">
<input bindinput="onInput2">
<input bindinput="onInput3">
```
3. 在 `multi-input` 组件的 js 文件中,定义多个事件处理函数,例如:
```javascript
Component({
methods: {
onInput1(event) {
console.log('input1:', event.detail.value);
},
onInput2(event) {
console.log('input2:', event.detail.value);
},
onInput3(event) {
console.log('input3:', event.detail.value);
}
}
})
```
4. 在使用 `multi-input` 组件的页面中,使用 `bindinput` 绑定 `multi-input` 组件的 `input` 事件,例如:
```html
<multi-input bindinput="onMultiInput"></multi-input>
```
5. 在页面的 js 文件中,定义 `onMultiInput` 事件处理函数,并在该函数中分别调用 `multi-input` 组件的各个事件处理函数,例如:
```javascript
Page({
onMultiInput(event) {
const value = event.detail.value;
this.selectComponent('#multi-input').onInput1({ detail: { value } });
this.selectComponent('#multi-input').onInput2({ detail: { value } });
this.selectComponent('#multi-input').onInput3({ detail: { value } });
}
})
```
这样,当用户输入时,会触发 `multi-input` 组件的多个 `input` 事件处理函数,并分别打印出输入的内容。
阅读全文