微信小程序点击切换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 ，所以这个方案并不好。

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

众多类似商城项目中，都会有列表分类标签随着界面滚动吸顶的效果

APP中实现相关功能很容易，h5也可以动态 *** 作DOM来设置

微信小程序没有DOM，该怎么实现呢？

其实这个场景还是比较简单的，正常情况下导航标签是在列表中间的，滑到顶部时吸顶，再拉下来时又回到原来的位置

根据场景，有两个参考思路：

1、顶部定位一个常在的同样的导航标签，通过页面的 scrollOffset 来控制显隐即可

2、通过动态添加 fixed 样式，来动态改变标签在页面中的位置

ps：不过第二种思路会有一个缺陷就是切换位置时页面会因为少了一部分而上移，所以还是需要补白，所以还是用第一种思路

我这里是用了自定义导航栏的，所以实现上会有所不同，如果是用系统导航栏可以稍微调整一下，因为偏移量会有所区别

CSS部分

JS部分

其中 CacheUtilnaviStatuHeight 这个是我应用启动时获取的导航+状态栏高度，X和其他机型还是有所区别，如果是系统导航栏的话这些相关逻辑都可以省略

这里为什么用navigator而不用view呢？

因为navigator是原生组件，可以在最上层，因为有可能列表内容有原生组件的话滑动就会有问题，所以navigator在不设置url的情况下和view的效果差不多，故采用navigator

cover-view：bug: 自定义组件嵌套 cover-view 时，自定义组件的 slot 及其父节点暂不支持通过 wx:if 控制显隐，否则会导致 cover-view 不显示，而且使用的版本限制也很多，所以就不考虑

1

EChart在某些配置较低的手机上出现无法交互的情况，换成自定义控件解决了这个问题。

2

新建一个自定义组件，布局如下

wxml

根据官方文档的说法，最好使用canvas2d进行绘制。

3

js

通过SelectorQuery获取canvas对象，这里的in方法用于获取自定义组件中的节点。

node属性用于获取节点实例，即canvas对象，size用于获取节点尺寸，就是canvas的宽高。这里有一个坑，通过节点获取到的画布宽高，仅仅是画布的宽高，想要在真机上正常显示，还需要获取手机的密度，并将画布的宽高乘以密度，canvasContext同样缩放屏幕密度倍数。

pixelRatio，官方说明为像素比，应该就是开发android时，1dp等于多少px。

4

绘制柱状图，其实并不复杂，统计图的要素就那么多。

首先是标题，如果需要标题的话，那么就要在绘制标题时，就需要指定标题的样式，然后预留出标题周围需要的边距。然后可以把绘制标题的方法抽取一个单独的方法。

坐标轴，确认坐标轴原点的位置，要考虑预留出坐标轴名称的位置，预留刻度名称的位置。

当获取到数据时，绘制跟数据有关的部分，也就是刷新方法。

如果需要动态刷新，js的canvas需要把原有的画布内容清空，于是要有一个clear方法。

5

提示条canvas的要覆盖在统计图canvas上，同理要根据屏幕密度对画布进行调整。同时初始化一组跟统计图canvas同样的坐标系。

绑定屏幕点击事件bindtouchastart，点击屏幕时记录点击的位置，显示提示条。

6

当手指在屏幕上滑动时，监听事件bindtouchmove，根据滑动距离变化触发页面刷新，统计图canvas，提示条canvas根据需要，是否都需要刷新。

大致思路是这样， 源码 供参考。

要制作可以复制粘贴的思维导图，您可以按照以下步骤进行：

打开一个新的文档或文件夹。在文档或文件夹中创建一个新的思维导图。使用适当的工具和符号来表示您需要的信息和关系。选择并复制整个思维导图或其中一部分。在Windows上，可以使用快捷键Ctrl+C；在Mac上，可以使用快捷键Command+C。打开目标文档或文件夹，并将复制的思维导图或其一部分粘贴到其中。在Windows上，可以使用快捷键Ctrl+V；在Mac上，可以使用快捷键Command+V。对于需要缩放大小或重新定位的思维导图，可以在目标文档或文件夹中进行修改。另存为目标文件名，并保存文档或文件夹。

请注意，如果您将思维导图复制到其他应用程序（如Microsoft Word、PowerPoint等）中，则可能需要进行格式调整和编辑以确保正确显示和布局。

此外，绘制思维导图，可以借助极简式专业思维导图软件--『MindNow思维导图』。

1、简约易用，多端互通，小白一秒上手 简约的界面风格，非常适合新手小白使用， *** 作简单，具有在线版本与客户端，电脑不在身边的，还可以使用手机微信小程序版本，文件实时同步；

3、超丰富模板，一键套用 海量知识模板库，覆盖读书笔记、职场技能、考研考证等20+细分领域，满足企业及个人知识库的多方位需求。

4、云端存储，多格式导出，一键分享 支持云端实时存储，多端互通，一键分享，多格式导出，文件夹可加密，可设置偏好设置等，是更专业的思维导图软件！

以上就是关于微信小程序点击切换class全部的内容，包括:微信小程序点击切换class、微信小程序——列表导航吸顶效果、微信小程序：自定义柱状图等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！