微信小程序按鈕點(diǎn)擊事件示例代碼
更新時(shí)間：2025年06月19日 09:31:31 作者：干到60歲退休的碼農(nóng)
在微信小程序中,實(shí)現(xiàn)按鈕點(diǎn)擊跳轉(zhuǎn)頁面是一個(gè)常見的功能需求,這篇文章主要介紹了微信小程序按鈕點(diǎn)擊事件的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
微信小程序中的點(diǎn)擊事件跟vue中的不一樣，不是使用@click，而是使用bind:tap
wxml中定義按鈕組件
<button bind:tap="onClick">點(diǎn)擊</button>
js中定義點(diǎn)擊處理事件
// index.js
Page({
data: {
message: '尚未點(diǎn)擊'
},
onClick() {
console.log('按鈕被點(diǎn)擊了');
this.setData({
message: '按鈕已被點(diǎn)擊！'
});
}
});
點(diǎn)擊傳參給事件處理
通過data-*屬性傳參(推薦)
<button bind:tap="addScore" data-type="homeTeam" data-score="3" class="btn score-3">+3</button>
js中獲取參數(shù)
addScore(e) {
const dataset = e.currentTarget.dataset
const {
score,
type,
} = dataset
if (type === 'homeTeam') {
this.setData({
'homeTeam.score': Number(this.data.homeTeam.score) + Number(score)
})
}
},
this.setData()用于更新數(shù)據(jù)并觸發(fā)頁面更新。
總結(jié)
到此這篇關(guān)于微信小程序按鈕點(diǎn)擊事件的文章就介紹到這了,更多相關(guān)微信小程序按鈕點(diǎn)擊事件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
JavaScript實(shí)現(xiàn)定時(shí)隱藏與顯示圖片的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)定時(shí)隱藏與顯示圖片的方法,可實(shí)現(xiàn)javascript定時(shí)關(guān)閉圖片的功能,涉及javascript針對(duì)頁面元素屬性定時(shí)操作的相關(guān)技巧,需要的朋友可以參考下2015-08-08
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)圖片加載淡入淡出效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-04-04
這篇文章介紹了幾種JS的動(dòng)態(tài)效果實(shí)例，有需要的朋友可以參考一下2013-07-07
JS實(shí)現(xiàn)關(guān)鍵字搜索時(shí)的相關(guān)下拉字段效果
關(guān)鍵字搜索時(shí)有下拉字段，在使用百度時(shí)會(huì)遇到,本例講述用js實(shí)現(xiàn)類似的效果2014-08-08
微信小程序判斷手機(jī)號(hào)是否合法的實(shí)例代碼
我們?cè)谖⑿判〕绦蜷_發(fā)的時(shí)候,手機(jī)號(hào)的驗(yàn)證是經(jīng)常需要操作的,那么如何驗(yàn)證手機(jī)號(hào)呢?這篇文章主要給大家介紹了關(guān)于微信小程序判斷手機(jī)號(hào)是否合法的相關(guān)資料,需要的朋友可以參考下2021-09-09
原生js和jquery中有關(guān)透明度設(shè)置的相關(guān)問題
設(shè)置透明度問題，比如圖片的淡入淡出效果。下面我介紹一下在原生js和jQuery中設(shè)置透明度的相關(guān)問題和注意點(diǎn)2014-01-01
JS關(guān)鍵字變色實(shí)現(xiàn)思路及代碼
JS關(guān)鍵字變色詳細(xì)很多朋友都很想實(shí)現(xiàn)吧接下來將執(zhí)行以下幾個(gè)步驟：1.替換關(guān)鍵字，對(duì)字體變色2.用正則，CSS背景變色;該方法可結(jié)合前臺(tái)JS調(diào)用，感興趣的朋友可以參考下，希望可以幫助到你2013-02-02
javascript函數(shù)可以用任意多個(gè)參數(shù)來調(diào)用，而不用管函數(shù)定義時(shí)指定了幾個(gè)參數(shù)。因?yàn)楹瘮?shù)是弱類型的，沒有方法去聲明它所期望的參數(shù)類型，并且給任何函數(shù)傳遞任何類型的值都是合法的2015-11-11
這篇文章主要介紹了js淡入淡出焦點(diǎn)圖幻燈片效果，圖片輪播效果特別適合做產(chǎn)品展示，自己可以更改圖片，標(biāo)題，感興趣的小伙伴可以參考下。2015-09-09
這篇文章主要介紹了微信小程序的引導(dǎo)頁實(shí)現(xiàn)代碼,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-06-06