小程序实现动态修改文字颜色

timg.jpg

先看效果图

tt.gif

直接上代码

xml

<view class='content-top-box' hidden='{{isFlag}}'>
  <!-- classIficationList:从接口获取到的数据 -->
    <!-- colrorList[index]：点击分类修改文字颜色 -->
      <block wx:for='{{classIficationList}}' wx:key='this'>
        <view style="font-size:26rpx;color:#333;width:210rpx;padding-left:10rpx;{{colrorList[index]}}" data-index='{{index}}' bindtap="customerFromStatisticals" >
          <text style="flex-grow:1">{{item.title}}</text>
        </view>
      </block>
    </view>

xss

.content-top-box{
  width: 90%;
  text-align:center;
  height: 200rpx;
  margin: 0 68rpx;
  display: flex;
  flex-flow: row wrap;
  justify-content: left;
  align-items: center;
}

js

Page({
  data: {
    classIficationList:[],  //从接口中获取到的分类
    colrorList: [], //统计报表分类颜色List
  },
// 根据索引跳转对应的统计报表分类
  customerFromStatisticals(e) {
    var that = this
    var colrorList = that.data.colrorList
    for (var i in colrorList) {
      colrorList[i] = ""
    }
    colrorList[e.currentTarget.dataset.index] = "color:blue"
    that.setData({
      colrorList
    })
}

以上是本次分享的内容，后期会带来更多的内容，希望大家多多支持关注