微信小程序 bindtap 事件多參數(shù)傳遞的代碼示例
更新時間：2023年12月15日 10:19:49 作者：天問_
在微信小程序中,我們無法直接通過 bindtap="handleClick(1,2,3)" 的方式傳遞參數(shù),而是通過自定義屬性data- 的方式傳遞,并在事件回調(diào)函數(shù)中通過event.currentTarget.dataset獲取這些參數(shù),本文給大家介紹小程序 bindtap 事件多參數(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']。
微信小程序點擊事件（bindtap）傳遞參數(shù)
小程序在組件上綁定事件后，傳遞參數(shù)的方式不同于前端開發(fā)其他場景中直接加參數(shù)的方式，小程序在參數(shù)的傳遞時，采用事件對象的自定義屬性的方式，具體實現(xiàn)如下：
wxml:
<view bindtap="goTo" data-index="{{item.index}}">點擊事件傳參</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)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)彈窗效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-08-08
JavaScript插件為什么看不懂，使用了什么技術(shù)？（示例講解）
JavaScript插件難以理解通常由以下技術(shù)原因造成：設(shè)計模式密集化、壓縮混淆技術(shù)?、異步控制迷宮、元編程技巧、依賴管理黑盒,這些技術(shù)本用于代碼優(yōu)化和安全保護(hù),但過度使用會導(dǎo)致可讀性急劇下降,建議調(diào)試時使用sourcemap反向映射,或通過AST分析工具還原代碼結(jié)構(gòu)2025-08-08
本文針對經(jīng)常使用長連接進(jìn)行消息收發(fā)的應(yīng)答場景，采用 Websocket 長連接作為服務(wù)監(jiān)聽的對象，模擬了一套類 http 服務(wù)框架，通過實例代碼介紹了Javascript?基于長連接的服務(wù)框架,需要的朋友可以參考下2022-07-07
Object的相關(guān)方法 和 js遍歷對象的常用方法總結(jié)
這篇文章主要介紹了Object的相關(guān)方法 和 js遍歷對象的常用方法,結(jié)合實例形式總結(jié)分析了Object對象操作的操作方法與js遍歷的三種常用方法,需要的朋友可以參考下2023-05-05
javascript實現(xiàn)頁面刷新時自動清空表單并選中的方法
這篇文章主要介紹了javascript實現(xiàn)頁面刷新時自動清空表單并選中的方法,涉及javascript中reset與focus方法的相關(guān)使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-07-07
這篇文章主要介紹了JavaScript獲取文本框內(nèi)選中文本的方法,實例分析了javascript通過onclick獲取文本框選中文本的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-02-02
這篇文章主要介紹了詳解ES7 Decorator 入門解析，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
javascript動態(tài)判斷html元素并執(zhí)行不同的操作
在javascript中對觸發(fā)事件的元素進(jìn)行判斷，然后執(zhí)行不同的操作，下面是具體的實現(xiàn)，需要的朋友可以學(xué)習(xí)下2014-06-06
用javascript腳本語言編寫一個“個人所得稅計算器”？計算公式：所得稅=（月收入-起征額）*10%；重填就是全部清空；十分的實用，有需要的小伙伴可以參考下。2015-05-05
本文主要介紹了js中的循環(huán)方式及各種遍歷的方法，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-12-12