微信小程序之实现循环的Button的动态点击改变字体颜色效果!
近日，在实现一个微信的小程序的点击标识功能，百度发现小程序好像不支持dom操作,无奈只能另寻它法。
JS文件
Page({ data: { selects: ['选择1', '选择2', '选择3', '选择4'], clickId: -1 }, onLoad: function () { }, /** * 用户点击Button,字体变色. */ changeColor: function (res) { if (this.data.clickId == res.currentTarget.id){ this.setData({ clickId: -1 }) return; } this.setData({ clickId: res.currentTarget.id }) }})WXML文件
<view class='selects'><block wx:key="index" wx:for='{{ selects }}'><view class='select' id='{{index}}'bindtap='changeColor'><block wx:if="{{index==clickId}}" ><button class='btn' style='color:black' >{{ item }}</button></block><block wx:else><button class='btn' style='color:red'>{{ item }}</button></block></view></block></view>WXSS文件
.selects{ margin-left: 5%; margin-right: 5%;}.selects>.select{ margin: 10rpx; float: left; width: 195rpx;}.selects>.select>.btn{ background-color: #FFFFFF;}
