快捷導(dǎo)航

微信小程序按鈕點擊事件示例代碼

更新時間：2025年06月19日 09:31:31 作者：干到60歲退休的碼農(nóng)

在微信小程序中,實現(xiàn)按鈕點擊跳轉(zhuǎn)頁面是一個常見的功能需求,這篇文章主要介紹了微信小程序按鈕點擊事件的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下

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)文章

JavaScript實現(xiàn)定時隱藏與顯示圖片的方法
這篇文章主要介紹了JavaScript實現(xiàn)定時隱藏與顯示圖片的方法,可實現(xiàn)javascript定時關(guān)閉圖片的功能,涉及javascript針對頁面元素屬性定時操作的相關(guān)技巧,需要的朋友可以參考下
2015-08-08
js實現(xiàn)圖片加載淡入淡出效果
這篇文章主要為大家詳細介紹了js實現(xiàn)圖片加載淡入淡出效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-04-04
js浮動圖片的動態(tài)效果
這篇文章介紹了幾種JS的動態(tài)效果實例，有需要的朋友可以參考一下
2013-07-07
JS實現(xiàn)關(guān)鍵字搜索時的相關(guān)下拉字段效果
關(guān)鍵字搜索時有下拉字段，在使用百度時會遇到,本例講述用js實現(xiàn)類似的效果
2014-08-08
微信小程序判斷手機號是否合法的實例代碼
我們在微信小程序開發(fā)的時候,手機號的驗證是經(jīng)常需要操作的,那么如何驗證手機號呢?這篇文章主要給大家介紹了關(guān)于微信小程序判斷手機號是否合法的相關(guān)資料,需要的朋友可以參考下
2021-09-09
原生js和jquery中有關(guān)透明度設(shè)置的相關(guān)問題
設(shè)置透明度問題，比如圖片的淡入淡出效果。下面我介紹一下在原生js和jQuery中設(shè)置透明度的相關(guān)問題和注意點
2014-01-01
JS關(guān)鍵字變色實現(xiàn)思路及代碼
JS關(guān)鍵字變色詳細很多朋友都很想實現(xiàn)吧接下來將執(zhí)行以下幾個步驟：1.替換關(guān)鍵字，對字體變色2.用正則，CSS背景變色;該方法可結(jié)合前臺JS調(diào)用，感興趣的朋友可以參考下，希望可以幫助到你
2013-02-02
詳解javascript函數(shù)的參數(shù)
javascript函數(shù)可以用任意多個參數(shù)來調(diào)用，而不用管函數(shù)定義時指定了幾個參數(shù)。因為函數(shù)是弱類型的，沒有方法去聲明它所期望的參數(shù)類型，并且給任何函數(shù)傳遞任何類型的值都是合法的
2015-11-11
js淡入淡出焦點圖幻燈片效果代碼分享
這篇文章主要介紹了js淡入淡出焦點圖幻燈片效果，圖片輪播效果特別適合做產(chǎn)品展示，自己可以更改圖片，標題，感興趣的小伙伴可以參考下。
2015-09-09
微信小程序的引導(dǎo)頁實現(xiàn)代碼
這篇文章主要介紹了微信小程序的引導(dǎo)頁實現(xiàn)代碼,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2020-06-06