微信小程式中wxml事件綁定傳參

小程式中wxml事件綁定傳參

在wxml中不能在bindtap中直接綁定事件時直接傳入參數，html常見的操作例如：

<!--wxml-->
<view bindtap="selectNav(2)">2</view>

<!--js-->
selectNav: function(num){
    console.log(num)
}

           

會導緻：VM27200:1 Component “pages/home/home” does not have a method “selectNav(2)” to handle event "tap"的錯誤，猜測是将selectNav(2)作為完整字元串去js檔案中比對相關的方法名，比對失敗後傳回該報錯。

既然不能直接傳參，就隻能通過屬性傳參，在bindtap事件觸發後，傳回的結果如下

changedTouches: [{…}]
currentTarget: {id: "", offsetLeft: 126, offsetTop: 1, dataset: {…}}
detail: {x: 203.8203125, y: 20.98828125}
mark: {}
mut: false
target: {id: "", offsetLeft: 126, offsetTop: 1, dataset: {…}}
timeStamp: 4322
touches: [{…}]
type: "tap"
           

在target和currentTarget均包含了相關的id和dataset屬性。

關于target和currentTarget的差別：event.target指向引起觸發事件的元素，而event.currentTarget則是事件綁定的元素，隻有被點選的那個目标元素的event.target才會等于event.currentTarget。

是以這裡使用currentTarget來綁定相關資料，而id隻能綁定一個資料，顯然不符合要求。

<!--wxml-->
<view class="nav-item iconfont iconfangjian {{navItem == 2 ? 'active': ''}}" bindtap="selectNav" data-num="2">

<!--js-->
selectNav: function ({ currentTarget }) {
    // console.log(res)
    this.setData({
        "navItem": currentTarget.dataset.num
    })
},
           

此時bindtap傳回結果如下：

changedTouches: [{…}]
currentTarget:
    dataset: {num: "2"}
    id: ""
    offsetLeft: 126
    offsetTop: 1
    __proto__: Object
detail: {x: 174.96875, y: 19.390625}
mark: {}
mut: false
target: {id: "", offsetLeft: 126, offsetTop: 1, dataset: {…}}
timeStamp: 3516
touches: [{…}]
type: "tap"
           

在selectNav中通過解構指派， currentTarget.dataset.num擷取傳遞的參數num。