找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索本站精品资源

首页 教程频道 小程序开发 查看内容

微信小程序点击移除添加class(点击改变背景颜色和字体颜色)

作者:模板之家 2017-12-26 12:02 9982人关注

微信小程序不允许DOM操作,所以不能用addClass这种方法,我的用法如下。点击元素后,获取元素中data-select值,赋值给catalogSelect,然后判断二者是否相等,一样则添加class(class的css可以

微信小程序不允许DOM操作,所以不能用addClass这种方法,我的用法如下。点击元素后,获取元素中data-select值,赋值给catalogSelect,然后判断二者是否相等,一样则添加class(class的css可以先写好)。 !--页面-- v ...

 
 
 

微信小程序不允许DOM操作,所以不能用addClass这种方法,我的用法如下。

点击元素后,获取元素中data-select值,赋值给catalogSelect,然后判断二者是否相等,一样则添加class(class的css可以先写好)。

这里写图片描述

    
    <view class="info_choose ">
        <view class="catalog_name">花色view>

        <view class="catalog_items display-flex-row" >
          <block wx:for="{{catalogs}}">
            <text data-select="{{item.select}}" class="{{item.select == catalogSelect ? 'active':''}} catalog_item" bindtap="chooseCatalog">{{item.catalogName}}text>
          block>
        view>
    view>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

//js代码

Page({
    data: {

        catalogs:[
          { "catalogName": "卡其卡其",
            "select":1          
          },
          {
            "catalogName": "其卡其卡卡其卡其",
            "select": 2
          },
          {
            "catalogName": "鲤鱼鲤鱼",
            "select": 3
          },
          {
            "catalogName": "神迹神迹卡其卡其",
            "select": 4
          },  

        ],
        catalogSelect:0,//判断是否选中
    },

    chooseCatalog:function(data){
      var that=this;
      that.setData({//把选中值放入判断值
        catalogSelect : data.currentTarget.dataset.select
      })


    }
})


路过

雷人

握手

鲜花

鸡蛋
原作者: 模板之家 来自: 网络收集

全部回复(0)