微信小程序 实现点击添加移除class

微信小程序中的点击添加移除class实现动态变化

在微信小程序中，我们可以通过点击不同的视图元素来动态地添加或移除class，实现页面元素的动态变化。这种交互方式不仅提高了用户体验，也让页面更加生动。

我们在wxml文件中定义了两个视图元素，分别带有“add_city”和“add_citying”两个class。通过绑定tap事件和data-num属性，我们可以在点击视图时获取其编号。

wxss文件定义了这两个class的样式。其中，“add_citying”的样式带有绿色边框和字体颜色，而“add_city”则是黑色边框和字体颜色。

在js文件中，我们定义了一个Page对象，其中包含一个data属性和一个clickNum方法。data对象中的_num属性用于存储当前选中的编号。clickNum方法通过获取e.target.dataset.num来获取被点击视图的编号，并通过setData方法更新_num的值。

接下来，我们可以通过在wxml中使用Mustache语法（双大括号）来根据_num的值动态地添加或移除class。例如，当_num的值为1时，视图元素将显示带有“add_citying”class的样式；当_num的值为其他值时，将显示带有“add_city”class的样式。

当页面加载时，我们可以通过onLoad方法来初始化_num的值。在此示例中，我们将其初始化为0，因此页面默认显示带有“add_city”class的样式。

当用户点击视图元素时，页面将根据被点击元素的编号动态地更改其样式。这种实现方式可以广泛应用于各种场景，例如动态切换菜单项、选项卡等。通过这种方式，我们可以实现更丰富、更灵活的页面交互效果。感谢大家的阅读和支持，希望这个例子能帮助到大家！