安徽建设住房建设厅网站,郑州app开发定制多少钱,品牌网图片新闻2003年下一条文章,国外免费网站服务器链接最近在学习小程序#xff0c;想通过写文章来记录自己的学习历程#xff0c;希望能做到每周都写…… 如何绑定一个事件 微信小程序中#xff0c;绑定事件要在标签内写入这两段代码#xff1a; bindtapfnActive
data-favourite {{isLike}}
复制代码…最近在学习小程序想通过写文章来记录自己的学习历程希望能做到每周都写…… 如何绑定一个事件 微信小程序中绑定事件要在标签内写入这两段代码 bindtapfnActive
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引入直接贴代码啦 viewiconfont type {{icon}} bind:tapfnActivedata-favourite {{isLike}}class beforeSelected {{isLike true ? active : }}/iconfont
/view
复制代码我是通过css和三元表达式来实现爱心的变色的那么怎样通过点击事件实现爱心变色呢 很简单先在data中定义好我们的isLike data: {isLike:false,},
复制代码再通过setData修改isLike的数据 methods: {fnActive(e){this.setData({isLike:!e.target.dataset.favourite})},}
复制代码写到这里爱心变色功能就十分简单地完成了本来就很简单之后会给这个功能加上计数器以及简单的动画让它变得更好康。 最后本人是刚开始学代码的小白若是大佬看到写的有错误plz及时指正勿喷蟹蟹QAQ 转载于:https://juejin.im/post/5ca99e0f51882544191d85dd
