目录
微信小程序事件绑定
1.事件类别
bindtap | 点击事件 |
bindinput | 输入事件 |
longtap | 长按事件 |
touchstart | 触摸开始 |
touchend | 触摸结束 |
touchcansce | 取消触摸 |
小程序绑值
1.单向绑定 M --> V
setData
2.单向绑定其实绑定的是M的一个副本M--------->副本-->V
注1:小程序中请求处理方法是不能传递参数,正确方式:通过data-xxx属性传递参数,再通过事件源获得参数
错误
<button bindtap="handletap(-1)"
正确
<button bindtap="handletap" data-number="{{-1}}"
正解:传递固定值-1
data-number="{{-1}}"
还可以绑值
data-number="{{n}}"
再从事件对象中获取
e.currentTarget.dataset.number
注2:在微信小程序中,js的数据和前端显示的数据是单数据流。
即js里边的数据变了,前端能立刻显示,但如果前端数据变了,js不能改变,怎么办呢!
我们可以通过bindinput方法,来实现双向数据绑定。
原理:我们使用bindinput事件来获取input的输入值,然后根据dataset获取要跟 data数组里的对象进行数据绑定
具体写法
1.在data中定义dataList属性,并在其中定义要双向绑定的属性名
2.定义bindInput方法
3.<input class="input" bindinput="bindInput" data-name="realName" placeholder="请输入帐号" auto-focus/>
bindInput(e) {
console.log("bindInput");
//debugger
//表单双向数据绑定
var that = this;
var dataset = e.target.dataset;
// data-开头的是自定义属性,可以通过dataset获取到,dataset是一个json对象
var name = dataset.name;
var value = e.detail.value;
//小问题:规则接收数据属性只能叫dataList
that.data.dataList[name] = value; //逻辑层数据的更改
// 拼接对象属性名,用于为对象属性赋值
var attributeName = "dataList." + name;
that.setData({//视图层数据的更改
[attributeName]: value
});
console.log(that.data.dataList);
}
2.事件绑定
bind绑定;
catch绑定;(能阻止事件冒泡)
例如:绑定点击事件 bindtap
page.wxml 文件
3.接收参数
Page({
onLoad: function(options) {
//小程序Data的赋值必须使用setData方法,错误:this.Data.title='xxx';
this.setData({
title: options.title
})
}
})