微信小程序-5-事件绑定

小程序中绑定事件,通过bind关键字来实现,如bindtap

不同的组件支持不同的事件,具体的看组件的说明即可

数据绑定

步骤

1. 在wxml绑定事件bindinput

   <view><input type="text" bindinput=""/></view>
   

2. 在js界面添加一个事件名,注意和data同级

   handInput(e){
   		console.log("bangding")
   	}
   

3. 在wxml中将事件和事件名绑定

   <view><input type="text" bindinput="handInput"/></view>
   

此时,当执行输入事件input的时候,就会执行所绑定的事件名handInput,也就意味着会在控制台打印bangding

获取输入值

如果想将输入的打印出来呢?这时候就用到了刚才添加事件名时括号里的e

这个e是数据源对象,可以先打印出来看一下

这么多数据,到底哪个是输入框的数据呢?再输入一次2,进行比较

可以看到这个值是我们需要的值,学过编程语言的就比较熟悉,可以通过.方法来获取

handInput(e){
		console.log(e.detail.value)
	}

赋值到data

如果想将输入的数字绑定在页面上,小程序规定写法如下:

handInput(e) {
		this.setData({
			num: e.detail.value
		})
	}

这样就是将e.detail.value的值赋值给了data里的num

小例子

需求

做加减两个按钮,并执行对应的数字加减1操作

最开始的想法是这样的:

<view>
	<button bindtap="plus">+</button>
	{{num}}
	<button bindtap="less">-</button>
</view>

Page({
	data: {
		num: 0
	},
	plus(e) {
		this.setData({less
			num: num + 1
		})
	},
	less(e) {
		this.setData({
			num: num - 1
		})
	},
})

执行后会报错,后经查阅后发现,拿到data里面的num,要this.data.num才可以

Page({
	data: {
		num: 0
	},
	plus(e) {
		this.setData({
			num: this.data.num + 1
		})
	},
	less(e) {
		this.setData({
			num: this.data.num - 1
		})
	},
})

这样,就实现了这个需求

优化

可以看出来,这两个事件,其实除了加减以外,都是相同的代码,那我们可不可以只写成一个事件呢?

<view>
	<button bindtap="bt">+</button>
	{{num}}
	<button bindtap="bt">-</button>
</view>

怎样才能让程序知道点击的是+还是-呢?在这里可以给这个事件绑定一个自定义参数

<view>
	<button bindtap="bt" data-parameter="{{1}}">+</button>
	{{num}}
	<button bindtap="bt" data-parameter="{{-1}}">-</button>
</view>

先打印一下,看看事件源返回的是什么

这个参数就是我们自定义的参数,之后就可以进行相应的运算了

bt(e) {
		this.setData({
			num: this.data.num + e.target.dataset.parameter
		})

	}