最近在學(xué)習(xí)小程序，想通過寫文章來記錄自己的學(xué)習(xí)歷程，希望能做到每周都寫……

如何綁定一個(gè)事件

微信小程序中，綁定事件要在標(biāo)簽內(nèi)寫入這兩段代碼：

bindtap="fnActive" data-favourite = "{{isLike}}" 復(fù)制代碼

bindtap 有兩層含義，tap 代表這是一個(gè)點(diǎn)擊事件，bind 代表這個(gè)事件能被監(jiān)聽，同時(shí) bindtap 是一個(gè)縮寫，bind:tap 才是它完全的寫法。tap 還有許多兄弟姐妹，我們可以在 這里 找到并認(rèn)識(shí)他們，使用他們有助于我們實(shí)現(xiàn)更多的交互功能。

在確定了一個(gè)可被監(jiān)聽的事件后，自然是要提供一個(gè)js函數(shù)，來處理這個(gè)事件，這里我們提供了一個(gè)名為 fnActive 的函數(shù)。順帶一提，這個(gè)函數(shù)是寫在js的 methods 里面的。既然有監(jiān)聽，那當(dāng)然是要傳參的啦，我們?cè)?methods 中寫一個(gè) fnActive(e){ } , 這里的 e 是自定義的，但推薦寫 event 或者 簡(jiǎn)寫為 e ，如果你在函數(shù)中寫一個(gè) console.log(e); 就會(huì)看到如圖：

輸出了值，這些是頁面參數(shù)的取值。

然后，data-favourite 增加一個(gè)新的從參數(shù)，data- 后面的名稱是自定義的，這里我命名為 favourite ，它的值就隨便定啦，但是我們不能把它寫成 data - favourite（有空格），或者 data-favouriteLike（駝峰命名），這樣是拿不到值的。寫好之后就可以在控制臺(tái)看到啦。它的位置是 target.dataset

如何寫一個(gè)能點(diǎn)擊變色的小愛心

怎樣在頁面中加入一個(gè)小愛心就不講了，用圖片或者iconfont都行。但值得一提的是，如果你的小愛心是一個(gè)組件的話，可以通過組件的形式引用 (試過幾個(gè)方法，感覺 這個(gè) 最好)。

我使用方法是上述推薦的iconfont引入，直接貼代碼啦

<view><iconfont type = "{{icon}}" bind:tap="fnActive"data-favourite = "{{isLike}}"class = "beforeSelected {{isLike === true ? 'active' : ''}}"></iconfont> </view> 復(fù)制代碼

我是通過css和三元表達(dá)式來實(shí)現(xiàn)愛心的變色的，那么怎樣通過點(diǎn)擊事件實(shí)現(xiàn)愛心變色呢

很簡(jiǎn)單，先在data中定義好我們的isLike

data: {isLike:false,}, 復(fù)制代碼

再通過setData，修改isLike的數(shù)據(jù)

methods: {fnActive(e){this.setData({isLike:!e.target.dataset.favourite})},} 復(fù)制代碼

寫到這里，愛心變色功能就十分簡(jiǎn)單地完成了（本來就很簡(jiǎn)單），之后會(huì)給這個(gè)功能加上計(jì)數(shù)器，以及簡(jiǎn)單的動(dòng)畫，讓它變得更好康。

最后，本人是剛開始學(xué)代碼的小白，若是大佬看到寫的有錯(cuò)誤，plz及時(shí)指正，勿噴，蟹蟹QAQ

轉(zhuǎn)載于:https://juejin.im/post/5ca99e0f51882544191d85dd

總結(jié)

以上是生活随笔為你收集整理的小程序学习（一）：点击爱心变色 -- 最简单的事件实现的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。