zoukankan      html  css  js  c++  java
  • 微信小程序如何动态增删class类名

    简述

    由于微信小程序开发不同于以往的普通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="1" class="list-menu list-menu1 {{_num==1?'cur':''}}" bindtap="menuClick">头条</view>
             <view data-num="2" class="list-menu list-menu2 {{_num==2?'cur':''}}" bindtap="menuClick">活动</view>
             <view data-num="3" class="list-menu list-menu3 {{_num==3?'cur':''}}" bindtap="menuClick">公告</view>
          </view>
    </view>
    //js
    menuClick:function(e){
          this.setData({
             _num:e.target.dataset.num
          })
      },

    效果

    我提前在curclass中添加了样式. 
    这里写图片描述

  • 相关阅读:
    Python Challenge 第十二关
    Python Challenge 第十一关
    Python Challenge 第十关
    Python Challenge 第九关
    Python Challenge 第八关
    Python Challenge 第七关
    zepto
    zepto
    zepto
    zepto
  • 原文地址:https://www.cnblogs.com/dalulu/p/8717158.html
Copyright © 2011-2022 走看看