美文网首页
微信小程序 动态修改元素class

微信小程序 动态修改元素class

作者: Hi小胡 | 来源:发表于2019-02-15 14:00 被阅读11次

    由于微信小程序无法获取元素dom进行操作,所以利用属性判断来进行更新:

    代码:

    wxml:

    <view class="choose {{num==1?'active':''}}" data-num="1" bindtap="itemClick"></view>
    <view class="choose {{num==2?'active':''}}" data-num="2" bindtap="itemClick"></view>
    <view class="choose {{num==3?'active':''}}" data-num="3" bindtap="itemClick"></view>
    <view class="choose {{num==4?'active':''}}" data-num="4" bindtap="itemClick"></view>
    <view class="choose {{num==5?'active':''}}" data-num="5" bindtap="itemClick"></view>
    

    wxss:

    .choose {
      ...
    }
    .choose.active {
      ...
    }
    

    js:

    Page({
    
        data: {
            num: 0
        },
    
        itemClick: function (e) {
            this.setData({
                num: 0
            })
            this.setData({
                num: e.currentTarget.dataset.num
            })
        }
    })
    

    相关文章

      网友评论

          本文标题:微信小程序 动态修改元素class

          本文链接:https://www.haomeiwen.com/subject/qnvpeqtx.html