零基礎學習微信小程序（5）：小程序事件的綁定

小程序綁定事件通過bind關鍵字來實現，如：bindtap、bindinput、bindchange等
bindinput
bindinput事件，輸入文本內容，就會出現相應的事件例如：

<!--pages/demo04/demo04.wxml-->
<input type="text" bindinput="handleInput"></input>
<view>{{num}}</view>

// pages/demo04/demo04.js
Page({
  /**
   * 頁面的初始數據
   */
  data: {
    num:0
  },
  //輸入框的input事件的執行邏輯
  handleInput(e){
    console.log(e);
  }
})

注意事項，在小程序的賦值操作比較特殊，不可以直接使用：
this.data.num=e.detail.value或者是
this.num=e.detail=e.detail.value
(e.detail.value的值可以在控制檯找到)
正確寫法：

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

所以代碼爲：

// pages/demo04/demo04.js
Page({
  /**
   * 頁面的初始數據
   */
  data: {
    num:0
  },
  //輸入框的input事件的執行邏輯
  handleInput(e){
    console.log(e.detail.value);
    this.setData({
      num:e.detail.value
    })
  }
})

在上面的input行輸入時，下方的也會進行實時的修改。

bindtap：綁定點擊事件
無法在小程序的事件中直接傳遞參數，需要通過自定義屬性的方式來傳遞參數

<!--pages/demo04/demo04.wxml-->
<input type="text" bindinput="handleInput"></input>
<button bindtap="handletap" data-operation="{{1}}">+</button>
<button bindtap="handletap" data-operation="{{-1}}">-</button>
<view>{{num}}</view>

// pages/demo04/demo04.js
Page({
  /**
   * 頁面的初始數據
   */
  data: {
    num:0
  },
  //輸入框的input事件的執行邏輯
  handleInput(e){
    console.log(e.detail.value);
    this.setData({
      num:e.detail.value
    })
  },
  //加減按鈕的事件：
  handletap(e){
    console.log(e);
    const operation=e.currentTarget.dataset.operation;
    this.setData({
      num:this.data.num+operation
    })
  }
})

文章內容爲視頻零基礎玩轉微信小程序【黑馬程序員】知識點整合