微信小程序点击移除添加class(点击改变背景颜色和字体颜色)
2017-07-25 14:30
716 查看
微信小程序不允许DOM操作,所以不能用addClass这种方法,我的用法如下。
点击元素后,获取元素中data-select值,赋值给catalogSelect,然后判断二者是否相等,一样则添加class(class的css可以先写好)。
源码下载:http://download.csdn.net/download/dknightl/9939872
点击元素后,获取元素中data-select值,赋值给catalogSelect,然后判断二者是否相等,一样则添加class(class的css可以先写好)。
源码下载:http://download.csdn.net/download/dknightl/9939872
<!--页面--> <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>
//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 }) } })
相关文章推荐
- 微信小程序如何实现通过点击view改变背景颜色
- UITableViewCell添加点击时改变字体的颜色、背景、图标
- 微信小程序中的循环列表,在点击时改变当前项的背景颜色
- 微信小程序点击添加移除class
- 微信小程序 实现点击添加移除class
- iOS cell添加点击时改变字体的颜色及背景
- 改变Android的hello world程序字体颜色和背景颜色
- 【微信小程序教程】点击按钮修改字体颜色
- 微信小程序 --- 子目录json配置无法改变导航栏背景颜色等配置
- Button点击背景和字体颜色改变的实现方法
- 【微信小程序教程】点击按钮修改view标签背景颜色
- listview、GridView单点击效果,点击改变背景改变item字体颜色实现
- gridview,点击选中一个或多个item,并改变item背景颜色,字体等
- 微信小程序实现点击按钮修改view标签背景颜色功能示例【附demo源码下载】
- RadioGroup的Radiobutton点击时改变字体颜色和背景颜色(采用Xml文件设置)
- 图形的绘制,如何使用自定义画笔(颜色,线宽,线形)。如何为程序中添加选项菜单和选项设置对话框,如何使用标准颜色对话框,如何使用字体对话框,在选项对话框中实现预览功能。实现选项对话框和窗口类中的数据交换。如何改变对话框和控件的背景色,如何改变控件的文本颜色,
- 改变Android的hello world程序字体颜色和背景颜色
- 实现listview条目点击后改变item背景颜色和字体颜色并保留
- 微信小程序实现点击按钮修改字体颜色功能【附demo源码下载】
- iOS开发之--如何修改TabBarItem的title的字体和颜色/BarButtonItem的title的字体大小和颜色/添加背景图片,并添加点击方法