事件處理

index.wxml

<!--index.wxml--> <view bindtap="viewTapHandle"><button bindtap="tapHandle">click me</button> </view>

index.js

//index.js //獲取應用實例 const app = getApp()Page({// data// on xxx// 定義用于界面層的事件處理函數tapHandle(e){// e 指的是事件參數console.log(e)},viewTapHandle (e){console.log(1,e)} })

解決方案：通過 catchcap 綁定的事件不會有冒泡

<!--index.wxml--> <view bindtap="viewTapHandle"><!-- <button bindtap="tapHandle">click me</button> --><!-- 通過 catchcap 綁定的事件不會有冒泡 --><button catchtap="tapHandle">click me</button> </view>

bindtap屬性 只能去指定函數的名字，并不能寫一個表達式

params.wxml

<!--pages/params/params.wxml--> <!-- 可以通過 data-xx 屬性，給 事件處理函數 傳遞額外的參數 --> <view><text>item 1 </text><button bindtap="removeHandle" data-id="1">remove</button> </view> <view><text>item 2 </text><button bindtap="removeHandle" data-id="2">remove</button> </view> <view><text>item 3 </text><button bindtap="removeHandle" data-id="3">remove</button> </view> <view><text>item 4 </text><button bindtap="removeHandle" data-id="4">remove</button> </view>

params.js

// pages/params/params.js Page({removeHandle(e){console.log(e)} })

---

單向數據流

index.wxss

/**index.wxss**/ input{border: 1px solid #ccc;margin: 20px; }

index.wxml

<!--index.wxml--> <text>{{foo}}</text> <input value="{{foo}}" bindinput="inputChangeHandle" />

index.js

//index.js //獲取應用實例 const app = getApp()Page({data:{foo:'hello wechat app'},inputChangeHandle(e){// e.target 當前文本框console.log(e.detail.value)//將界面上的數據再次同步回 數據源上this.data.foo=e.detail.value//setData 1. 改變數據源// 2. 通知框架，數據源變了，需要重新渲染頁面this.setData({foo:e.detail.value})} })

? ? ? ? ? ? ?

---

WXSS? vs? CSS

rpx? 可以根據屏幕寬度進行自適應。規定屏幕寬度為750 rpx 。

導入樣式 。 公用樣式 是放在公共目錄下的

app.wxss? 是所有的頁面都會用到的樣式

@import "../../common.wxss"

?

總結

以上是生活随笔為你收集整理的微信小程序开发3——事件处理的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。