微信小程序如何动态增删class类名
2024-08-23 04:23:13
简述
由于微信小程序开发不同于以往的普通web开发, 因此无法通过js获取wxml文件的dom结构, 因此从js上直接添加一个类名应该不可能了. 可是我们可以通过微信小程序数据绑定以及view标签的”data-“自定义属性去更改标签类名.
说明
通过数据绑定在3个标签上绑定相同的变量_num
, 当点击不同标签时, 在js逻辑层中通过event.target.dataset.num
来获取标签data-num
值, 然后在wxml中通过三元运算符的匹配便可完成class名的增改,
//wxml
<view class="list-wrapper">
<view class="list-top">
<view data-num="" class="list-menu list-menu1 {{_num==1?'cur':''}}" bindtap="menuClick">头条</view>
<view data-num="" class="list-menu list-menu2 {{_num==2?'cur':''}}" bindtap="menuClick">活动</view>
<view data-num="" class="list-menu list-menu3 {{_num==3?'cur':''}}" bindtap="menuClick">公告</view>
</view>
</view>
//js
menuClick:function(e){
this.setData({
_num:e.target.dataset.num
})
},
效果
我提前在cur
class中添加了样式.
最新文章
- SVG学习备忘录
- C#中的BackgroundWorker控件+Delegate.Invoke (委托同步调用)
- fir.im Weekly - 1000 个 Android 开源项目集合
- UOJ147 斗地主
- jquery 使用textarea
- [VS]vs的宏
- BZOJ1089: [SCOI2003]严格n元树
- 跨服务器查询sql语句样例
- (step 8.2.13)hdu 1524(A Chess Game)
- 用curl测试rest服务时,
- (转载)WebSphere MQ安装过程
- Android Studio科普篇——1.几个个性化设置
- SpringMVC源码分析--容器初始化(四)FrameworkServlet
- Bellman-Ford&;&;SPFA
- leetcode python 042收集雨水
- hdu 6241 Color a Tree 2017 CCPC 哈理工站 L
- [Localization] MobileNet with SSD
- Code Signal_练习题_chessBoardCellColor
- 20155207 实验5 MSF基础应用
- js学习笔记19----getElementsByClassName函数封装