微信小程序按鈕點(diǎn)擊事件示例代碼
更新時(shí)間：2025年06月19日 09:31:31 作者：干到60歲退休的碼農(nóng)
在微信小程序中,實(shí)現(xiàn)按鈕點(diǎn)擊跳轉(zhuǎn)頁(yè)面是一個(gè)常見(jiàn)的功能需求,這篇文章主要介紹了微信小程序按鈕點(diǎn)擊事件的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(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)擊傳參給事件處理
通過(guò)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ā)頁(yè)面更新。
總結(jié)
到此這篇關(guān)于微信小程序按鈕點(diǎn)擊事件的文章就介紹到這了,更多相關(guān)微信小程序按鈕點(diǎn)擊事件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
用于節(jié)點(diǎn)操作的API，顛覆原生操作HTML DOM節(jié)點(diǎn)的API
敏捷開(kāi)發(fā)是一種以人為核心、迭代、循序漸進(jìn)的開(kāi)發(fā)方法。在敏捷開(kāi)發(fā)中，軟件項(xiàng)目的構(gòu)建被切分成多個(gè)子項(xiàng)目，各個(gè)子項(xiàng)目的成果都經(jīng)過(guò)測(cè)試，具備集成和可運(yùn)行的特征。2010-12-12
用js生成a標(biāo)簽下載文件并攜帶請(qǐng)求頭的兩種方法
這篇文章主要給大家介紹了關(guān)于用js生成a標(biāo)簽下載文件并攜帶請(qǐng)求頭的兩種方法, 這種下載文件方式在前端項(xiàng)目中非常常見(jiàn),文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-03-03
這篇文章主要介紹了let與var聲明變量區(qū)別，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
JavaScript中的垃圾回收與內(nèi)存泄漏示例詳解
這篇文章主要給大家介紹了關(guān)于JavaScript中垃圾回收與內(nèi)存泄漏的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用JavaScript具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
最近領(lǐng)導(dǎo)安排做一個(gè)小程序之做頭部做導(dǎo)航分類(lèi)效果，下面小編給大家分享實(shí)現(xiàn)代碼，需要的朋友參考下吧2017-10-10
基于JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)版羊了個(gè)羊游戲
最近羊了個(gè)羊火的不得了，這篇文章主要為大家介紹了如何利用JS實(shí)現(xiàn)個(gè)網(wǎng)頁(yè)版羊了個(gè)羊游戲，有需要的朋友可以借鑒參考下，希望能夠有所幫助2022-09-09
兩行代碼輕松搞定JavaScript日期驗(yàn)證,通過(guò)實(shí)例化Date對(duì)象來(lái)生成一個(gè)合法的日期，驗(yàn)證日期是否合法，感興趣的小伙伴們可以參考一下2016-08-08
JS window對(duì)象簡(jiǎn)單操作完整示例
這篇文章主要介紹了JS window對(duì)象簡(jiǎn)單操作,結(jié)合完整實(shí)例形式分析了JavaScript Window對(duì)象各種常見(jiàn)提示框、彈出窗口及時(shí)間相關(guān)操作技巧,需要的朋友可以參考下2020-01-01
最近用js寫(xiě)了一個(gè)計(jì)算器的頁(yè)面。基本上使用到了，ul li的幾點(diǎn)用法。用來(lái)布局，并且創(chuàng)造出了很不錯(cuò)的鼠標(biāo)懸停效果。2010-04-04
隨機(jī)顯示經(jīng)典句子或詩(shī)歌的javascript腳本
這篇文章主要介紹了隨機(jī)顯示經(jīng)典句子或詩(shī)歌的javascript腳本的相關(guān)資料,需要的朋友可以參考下2007-08-08