微信小程序开发-数据事件绑定

🐳简介

数据绑定

数据绑定是一种将小程序中的数据与页面元素关联起来的技术，使得当数据变化时，页面元素能够自动更新。这通常使用特定的语法（如双大括号 {{ }}）来实现，以便在页面上展示动态数据。

事件绑定

事件绑定是将用户操作（如点击、滑动等）与特定的处理函数关联起来的过程。当用户执行这些操作时，会触发相应的处理函数并执行特定的代码逻辑。事件绑定通常使用特定的语法（如 bindtap）来实现。

🐳数据绑定Mustache语法

🐤内容绑定

在xml中我们可以通过下面方式，使用双大括号将变量包起来，进行数据绑定

<view>{{要绑定的数据名称}}</view>

在页面的js文件中的data对象里面，我们可以在这里定义数据初始化数据

如下图中的data中定义了一个motto：'Hello World'

我们就可以在xml中通过<view>{{motto}}</view>对这个数据进行绑定

🐤绑定属性

在data中继续加入属性，一个图片的URL地址

data: {
    motto: 'Hello World',
    img:'https://c-ssl.duitang.com/uploads/item/201408/02/20140802211120_t34dW.jpeg'
}

然后我们就可以在xml中通过<image src="{{img}}"></image>对图片进行绑定

🐳事件绑定

在小程序中，常用的事件用于处理用户与界面元素的交互。以下是一些常见的事件类型：

点击事件（tap）
1. 当用户点击某个组件时触发。例如，bindtap 或 catchtap 用于按钮、图片、文本等组件。
触摸事件：
- touchstart：触摸开始
- touchmove：触摸移动
- touchend：触摸结束
- touchcancel：触摸取消（如来电等导致触摸中断）
长按事件（longpress）：
- 当用户长按某个组件时触发。常用于实现长按预览、长按删除等功能。
滑动事件（scroll）：
- 在可滚动视图区域滚动时触发。常用于滚动视图、列表等组件。
输入事件：
- input：常用于输入框（<input> 或 <textarea>）中，当内容改变时触发。
- confirm：在 <input type="text" confirm-type="..."/> 中，用户点击键盘的完成按钮时触发。
表单事件：
- formsubmit：表单提交时触发。
- formreset：表单重置时触发。

🐤点击事件绑定

以tap事件为例，我们通过tap事件来相应用户的点击行为，如下定义一个按钮

<button type="primary" bindtap="btnTapHandler">按钮</button>

在js文件中定义事件的处理函数，但按钮被点击时就会触发函数

🐤点击事件绑定传参

假设你有一个按钮，你想在用户点击它时触发一个事件，并传递一个参数：

<button bindtap="handleClick" data-param="{{yourParam}}">点击我</button>

在对应的JS文件中，你需要定义handleClick函数，并接收传递的参数：

Page({  
  data: {  
    yourParam: 'Hello, World!'  
  },  
  handleClick: function(e) {  
    // 通过e.currentTarget.dataset获取传递的参数  
    var param = e.currentTarget.dataset.param;  
    console.log(param); // 输出：Hello, World!  
    // ... 在这里处理你的逻辑 ...  
  }  
})

这样当点击按钮时，函数中就会接受到对应参数，并打印到控制台！

<input type="text" bindinput="handleInput" placeholder="请输入内容" />

🐤输入事件

bindinput用于监听输入框（<input>）的输入内容变化事件。当用户在输入框中输入内容时，bindinput绑定的事件处理函数会被触发。

在输入框上使用bindinput属性，并指定一个事件处理函数名。例如：

<input type="text" bindinput="handleInput" placeholder="请输入内容" />

在对应的JS文件中，你需要定义handleInput函数，并接收一个事件对象参数e。这个事件对象包含了关于触发事件的详细信息，例如输入的内容。你可以通过e.detail.value获取输入框的当前值。

Page({  
  handleInput: function(e) {  
    // e.detail.value 就是输入框的当前值  
    var inputValue = e.detail.value;  
    console.log(inputValue); // 打印输入内容  
    // ... 在这里处理你的逻辑 ...  
  }  
})

当每次在输入框输入值时就会触发一次handleInput函数！