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