微信小程序点击切换class

在浏览器端开发时，经常会有这种情况：单击某个元素，让其高亮显示，例如下图

这个用 js 很容易实现， 因为单击事件触发时，函数传入的 event 事件包含 target 对象，里面会有触发事件的 DOM 元素，我们只需要 *** 作这个 DOM 元素，为其添加 class 名就好了。

而在微信小程序开发时，由于其类似于 vue 不建议直接 *** 作 DOM （两者都有API可以做到），事件触发的时候同样会有默认参数传入， 但是无法直接取到 DOM 节点本身，而是包含挂载的一些数据，和点击部位的坐标信息等，具体参阅官方文档 《事件·小程序》 ， this 也总是指向 Page ，所以我们就需要 通过数据间接 *** 纵 DOM 来实现。

例如我遇到的问题是，我想做一个月历，当你选中某一天的时候，那一天高亮显示。

由于自己在做这一块时遇到了很多这方面的困惑，所以我在网上看了一些解决方案，下面列举一种在 CSDN 上看到的方案 ：

这个方法绑定了一个动态的 class 名，用一个变量 _num 可以做到切换 class 的作用，当点击元素时，js 获取到节点上 data-num 上的值，这里将值赋给变量 _num ，相应的由于是数据驱动，节点上的 class 名经过计算变化为 cur ，其他的同理。

在没有搞清这个方法前，我制作月历是使用的条件渲染。具体做法是，每个日期节点准备两个 DOM 元素，一个带有 class="selected" ，一个没有， 经过列表渲染之后每个单位实际上存在两个逻辑上的元素，这个时候通过点击改变 Page 中 data 里面的 selectedDate 和 selectedDate ，进一步控制 wx:if 的条件来实现元素的渲染与否。

点击事件发生时，获取节点中的 data-month 和 data-date 值， 并赋给 selectedDate 和 selectedDate

由于每个月都有某些日期， 所以加个月份限制 ，这里我设置了只做从这个月到未来6个月的月历，所以不需要加年份限制。

深知这个方案问题很大，是这一类的MVVM框架因的条件渲染切换消耗较大，微信小程序开发文档中介绍了 wx:if 相关 ：

当用户点击某个日期的时候会重新渲染整个 DOM ，所以这个方案并不好。

搞懂前面的逻辑，再来看这个方案就会很明白了。

微信小程序 触控事件： 微信小程序的"事件"挺有意思。看了说明文档后发现它的功能很全，事件可以向父节点传递，而且打印这个事件的信息很透明，调试起来应该非常方便。 接下来把文档copy过来 原文地址：>

        在写一个小程序界面的时候，发现这个页面的按钮点击失效，打印log打印不出来，而其他页面的点击事件仍旧可以触发。找了半天发现按钮被textarea组件遮挡了，导致点击不到。

解决办法：给textarea添加样式，修改它的高度。

注意：可通过下面这个窗口查看各部分大小及其位置，遇到组件失灵时可以先看一下有没有被覆盖。

创建一个按钮，点击这个按钮，改变视图层上面的数据

示例：

新建一个微信小程序的Hello World项目，找到indexwxml文件

indexwxml:

使用一个<button>元素，使用bindtap事件作为点击事件

indexjs：

在Page({})内，定义一Page个函数changeMotto，函数内部中使用关键字this，this代表对象，

调用setData()函数，里面传入一个Object对象作为参数，把motto的这个字符串变量，重新赋值为“你好 世界”

创建一个你想要跳转的页面文件indexwxml

在跳转前的页面中加入按钮组件并绑定跳转事件

在跳转前页面对应的js文件中添加绑定事件

这个时候点击按钮控制台会报错路径找不到

在微信小程序配置文件中配置新加的页面

这个时候就自动生成了新增页面的各种文件

页面也可以跳转了

第一次研究小程序，也第一次写博客，有错误欢迎大家指正！

view标签 加 bindtap事件，用data-name传值，如果view中只有文字，点击整个view区域都可以接收到data-name的值，如果view里面加一个lable标签，那么点击lable包裹的区域，data-name取不到值。

解决方法：把取值方式 由etargetdatasetcarrierName 修改为ecurrentTargetdatasetcarrierName即可！

在组件中绑定一个事件处理函数。

如bindtap，当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数

<view bindtap="view"> <text bindtap="toast" class="journey">开启小程序之旅 </text> </view>

子元素触发父级元素也会触发若要只触发子元素使用catchtap代替bindtap

在相应的Page定义中写上相应的事件处理函数，参数是event。

Page({ toast: function (event) { // wxnavigateTo({ // url: '/redirect/redirect' // }); wxredirectTo({ url: '/redirect/redirect', }); // view:function(event){ // // 父级元素 // } }, / 生命周期函数--监听页面隐藏/并未关闭返回 / onHide: function (event) { consolelog(event) }, / 生命周期函数--监听页面卸载/ / onUnload: function () { consolelog(222) }, })

事件分类

冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。

非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。

WXML的冒泡事件列表：

类型 触发条件 touchstart 手指触摸动作开始 touchmove 手指触摸后移动 touchcancel 手指触摸动作被打断，如来电提醒，d窗 touchend 手指触摸动作结束 tap 手指触摸后马上离开 longtap 手指触摸后，超过350ms再离开

注：除上表之外的其他组件自定义事件如无特殊申明都是非冒泡事件，如<form/>的submit事件，<input/>的input事件，<scroll-view/>的scroll事件，(详见各个组件官方文档)

以上就是关于微信小程序点击切换class全部的内容，包括:微信小程序点击切换class、微信小程序 有方法解决多点触控事件么、微信小程序 | 按钮点击（bindtap）失效等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！