day03-事件绑定&wxs脚本&页面渲染&页面事件

目标

• 能够实现小程序页面中的数据绑定和事件绑定
• 能够使用wxs脚本处理页面数据
• 能够实现下拉刷新和上拉触底的操作

数据绑定与事件绑定

数据绑定

如何定义页面的数据

小程序中每个页面，由4部分组成，其中 .js 文件内可以定义页面的数据、生命周期函数、其它业务逻辑；

如果要在.js文件内定义页面的数据，只需把数据定义到 data 节点下即可

示例代码如下：

Page({
   
  data: {
   
    info: 'init data', // 字符串类型的数据
    array: [{
   msg: '1'}, {
   msg: '2'}] // 数组类型的数据
  }
})

Mustache 语法格式

把data中的数据绑定到页面中渲染，使用 Mustache 语法（双大括号）将变量包起来即可；

语法格式为：

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

Mustache 语法的主要应用场景：

• 绑定内容

  页面数据

  Page({
       
    data: {
       
      message: 'Hello MINA!'
    }
  })
  

  页面结构

  <view>{
      {message}}</view>
  

• 绑定属性

  页面数据

  Page({
       
    data: {
       
      id: 0
    }
  })
  

  页面结构

  <view id="item-{
        {id}}"> </view>
  

• 运算（三元表达式、算术运算、逻辑判断、字符串运算、数据路径运算）

  页面数据

  Page({
       
    data: {
       
      flag: true
    }
  })
  

  页面结构

  <view> {
      { flag ? ‘条件为真’ : ‘条件为假’ }} </view>
  

事件绑定

什么是事件

• 事件是视图层到逻辑层的通讯方式
• 事件可以将用户的行为反馈到逻辑层进行处理
• 事件可以绑定在组件上，当组件触发事件，就会执行逻辑层中对应的事件处理函数
• 事件对象可以携带额外信息，如 id, dataset, touches

bindtap绑定触摸事件

在小程序中，不存在网页中的 onclick 鼠标点击事件，而是通过 tap 事件来响应触摸行为；

通过 bindtap，可以为组件绑定触摸事件，语法如下

<view bindtap=“tapName”>点我 点我 ! <view>

在相应的Page定义中写上相应的事件处理函数，事件参数是event

Page({
   
  tapName: function(event) {
   
    console.log(event)
  }
})

bindinput绑定文本框输入事件

在小程序中，通过 input 事件来响应文本框的输入事件；

通过 bindinput，可以为文本框绑定输入事件，语法如下：

<input bindinput=“inputName”><input>

在相应的Page定义中写上相应的事件处理函数，事件参数是event：

Page({
   
  inputName: function(event) {
   
    //event.detail.value 就能拿到每次输入框改变最新的值
    console.log(event)
  }
})

data和文本框之间的数据同步

监听文本框的数据变化

在文本框的 input 事件处理函数中，通过事件参数 event，能够访问到文本框的最新值

**语法：**event.detail.value

示例代码如下：

inputName: function (event) {
   
    // 获取到文本框中最新的内容
    console.log(event.detail.value)
}

修改data中的数据

通过 this.setData(dataObject) 方法，可以给页面中的 data 数据重新赋值

例如：监听文本框的数据变化，并把最新的值赋值给 data 中的 msg

示例代码如下：

inputName:</