快捷導(dǎo)航

微信小程序 bindtap 事件多參數(shù)傳遞的代碼示例

更新時間：2023年12月15日 10:19:49 作者：天問_

在微信小程序中,我們無法直接通過 bindtap="handleClick(1,2,3)" 的方式傳遞參數(shù),而是通過自定義屬性data- 的方式傳遞,并在事件回調(diào)函數(shù)中通過event.currentTarget.dataset獲取這些參數(shù),本文給大家介紹小程序 bindtap 事件多參數(shù)傳遞的實(shí)例代碼,感興趣的朋友一起看看吧

微信小程序 bindtap 事件多參數(shù)傳遞

在微信小程序中，我們無法直接通過 bindtap="handleClick(1,2,3)" 的方式傳遞參數(shù)，而是需要通過自定義屬性 data- 的方式進(jìn)行傳遞，并在事件回調(diào)函數(shù)中通過 event.currentTarget.dataset 來獲取這些參數(shù)。然而，這種傳參方式不夠友好，尤其是在傳遞多個參數(shù)時，需要特別注意參數(shù)的形式和命名方式。

代碼示例

index.wxml

<template name="like">
  <view class="like-line"></view>
  <view class="like-wrap">
    <view class="like {{ item.feedbackType === 1 ? 'selected' : '' }}" bindtap="like" data-args="{{ {item, index, type: 1} }}">
      <!--      ??-->
    </view>
    <view class="dislike {{ item.feedbackType === 2 ? 'selected' : '' }}" bindtap="like" data-args="{{ {item, index, type: 2} }}">
      <!--      ??-->
    </view>
  </view>
</template>

index.js

Page({
  async like(e) {
    let { item, type, index } = e.currentTarget.dataset['args']
    let { feedbackType, recordId } = item
    console.log({ type, index, feedbackType, recordId })
    // do something
  },
})

注意：

自定義屬性命名，不能包含大寫字母，大寫會自動轉(zhuǎn)成小寫，可能會導(dǎo)致獲取不到參數(shù)。如 data-recordId 會自動轉(zhuǎn)成 data-recordid；
如果使用 data-record-id 的形式，最終在 event.target.dataset 中會將 - 轉(zhuǎn)成駝峰的形式，即 recordId，取值需要用 event.target.dataset['recordId']。

微信小程序點(diǎn)擊事件（bindtap）傳遞參數(shù)

小程序在組件上綁定事件后，傳遞參數(shù)的方式不同于前端開發(fā)其他場景中直接加參數(shù)的方式，小程序在參數(shù)的傳遞時，采用事件對象的自定義屬性的方式，具體實(shí)現(xiàn)如下：

wxml:

<view bindtap="goTo" data-index="{{item.index}}">點(diǎn)擊事件傳參</view>

js中：

goTo: function(e){
    // 傳遞的參數(shù)
    const index= e.currentTarget.dataset['index'];
}

利用自定義屬性完成事件的參數(shù)傳遞

注意??！data-index

傳參命名最好是小寫，寫成大寫編譯會轉(zhuǎn)為小寫的?。?！獲取還是得寫小寫來獲取

到此這篇關(guān)于微信小程序 bindtap 事件多參數(shù)傳遞的文章就介紹到這了,更多相關(guān)微信小程序 bindtap 多參數(shù)傳遞內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

微信小程序 bindtap 事件多參數(shù)傳遞的代碼示例

目錄

微信小程序 bindtap 事件多參數(shù)傳遞

微信小程序點(diǎn)擊事件（bindtap）傳遞參數(shù)

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具