android 点击爱心变色,小程序学习（一）：点击爱心变色 -- 最简单的事件实现

最近在学习小程序，想通过写文章来记录自己的学习历程，希望能做到每周都写……

如何绑定一个事件

微信小程序中，绑定事件要在标签内写入这两段代码：

bindtap="fnActive"

data-favourite = "{{isLike}}"

复制代码

bindtap 有两层含义，tap 代表这是一个点击事件，bind 代表这个事件能被监听，同时 bindtap 是一个缩写，bind:tap 才是它完全的写法。tap 还有许多兄弟姐妹，我们可以在这里找到并认识他们，使用他们有助于我们实现更多的交互功能。

在确定了一个可被监听的事件后，自然是要提供一个js函数，来处理这个事件，这里我们提供了一个名为 fnActive 的函数。顺带一提，这个函数是写在js的 methods 里面的。既然有监听，那当然是要传参的啦，我们在 methods 中写一个 fnActive(e){ } , 这里的 e 是自定义的，但推荐写 event 或者简写为 e ，如果你在函数中写一个 console.log(e); 就会看到如图：输出了值，这些是页面参数的取值。

然后，data-favourite 增加一个新的从参数，data- 后面的名称是自定义的，这里我命名为 favourite ，它的值就随便定啦，但是我们不能把它写成 data - favourite(有空格)，或者 data-favouriteLike(驼峰命名)，这样是拿不到值的。写好之后就可以在控制台看到啦。它的位置是 target.dataset

如何写一个能点击变色的小爱心

怎样在页面中加入一个小爱心就不讲了，用图片或者iconfont都行。但值得一提的是，如果你的小爱心是一个组件的话，可以通过组件的形式引用 (试过几个方法，感觉这个最好)。

我使用方法是上述推荐的iconfont引入，直接贴代码啦

type = "{{icon}}"

bind:tap="fnActive"

data-favourite = "{{isLike}}"

class = "beforeSelected {{isLike === true ? 'active' : ''}}"

复制代码

我是通过css和三元表达式来实现爱心的变色的，那么怎样通过点击事件实现爱心变色呢

很简单，先在data中定义好我们的isLike

data: {

isLike:false,

复制代码

再通过setData，修改isLike的数据

methods: {

fnActive(e){

this.setData({

isLike:!e.target.dataset.favourite

})

}

复制代码

写到这里，爱心变色功能就十分简单地完成了(本来就很简单)，之后会给这个功能加上计数器，以及简单的动画，让它变得更好康。

最后，本人是刚开始学代码的小白，若是大佬看到写的有错误，plz及时指正，勿喷，蟹蟹QAQ

android 点击爱心变色,小程序学习（一）：点击爱心变色 -- 最简单的事件实现相关推荐

android 点击爱心变色,小程序学习（一）：点击爱心变色最简单的事件实现
最近在学习小程序,想通过写文章来记录自己的学习历程,希望能做到每周都写-- 如何绑定一个事件微信小程序中,绑定事件要在标签内写入这两段代码:bindtap="fnActive"d ...
小程序学习：点击按钮修改标签文本内容
原文:https://blog.csdn.net/michael_ouyang/article/details/54923052 简单修改2个自动生成的模板文件即可. 1.修改index.wxml: ...
微信小程序学习日志（一）
微信小程序学习日志之工具配置及创建简单页面 1.任务与分工在这次点餐系统项目中,我和我所在的小程序组的共三个成员主要负责小程序前端的实现.我们针对菜单,点菜清单(结算页面)以及评论三个主要页面进行了 ...
android 代码等待一秒,【报Bug】安卓微信旧版本7.0.2 ，支付完成，等待几秒后，再点击完成回到小程序，跳转不了页面。...
详细问题描述微信旧版本7.0.2 ,支付完成,等待几秒后,再点击完成回到小程序,跳转不了页面. (DCloud产品不会有明显的bug,所以你遇到的问题大都是在特定环境下才能重现的问题,请仔细描述你 ...
微信小程序学习Course 8 本地缓存API
微信小程序学习Course 8 本地缓存API 本篇随笔主要介绍微信小程序本地缓存API函数,微信小程序可以在本地缓存一些关键词数据,每一条关键词对应一段字符串.微信小程序提供了以下API函数. 8. ...
微信小程序阻止冒泡点击_微信小程序bindtap事件与冒泡阻止详解
bindtap就是点击事件在.wxml文件绑定: cilck here 在一个组件的属性上添加bindtap并赋予一个值(一个函数名) 当点击该组件时, 会触发相应的函数执行在后台.js文件中定义 ...
小程序 pagescrollto_微信小程序学习笔记（三）-- 首页及详情页开发
一.常用组件在上一个章节中讲解了封装请求数据的模块,在此处请求轮播图的数据 1.首页轮播图数据的请求以及渲染 1.1 轮播图数据的请求 pages/home/home.js import 2 使用组 ...
C语言小案例_小程序学习（三）
小程序学习--页面设置案例一 float页面布局效果 1.案例的整体介绍设计一个小程序,利用float布局来实现页面的布局效果.有两种效果分别是上左右下和上左中右下. 2.案例的代码详解 (1) ...
小程序学习历程（二）：注册小程序测试号
该文适合还没有微信小程序开发者账号,以及有了开发者账号同时还想注册一个测试账号的读者. 开发者测试账号推出的用意,主要是:方便我们在决定正式注册小程序账号之前,或者仅仅只是想体验一下小程序(或小游戏 ...

android 点击爱心变色,小程序学习（一）：点击爱心变色 -- 最简单的事件实现

android 点击爱心变色,小程序学习（一）：点击爱心变色 -- 最简单的事件实现相关推荐

最新文章

热门文章