微信小程序加减颜色不同效果的实现（积分加减记录颜色改变，或者其他类似效果）

<view class='list' wx:for="{{detaillist}}" wx:for-item="item">
        <view>
          <view class="title">{{item.title}}</view>
          <view class="time">{{item.time}}</view>
        </view>
        <view class="point {{item.isAdd?'on':''}}">{{item.point}}</view>
    </view>

/* pages/pointdetail/pointdetail.wxss */
.top{
  width: 100%;
  height: 300rpx;
}
.list{
  padding: 30rpx 40rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #eee;
}
.title{
  color: #1f1f1f;
  font-size: 36rpx;
  line-height: 36rpx;
}
.time{
  margin-top: 20rpx;
  color:#999999;
  font-size: 30rpx;
  line-height: 36rpx;
}
.point{
  color:#333333;
  font-size: 36rpx;
  line-height: 36rpx;
}
.point.on{
  color:#fe0000;
  font-size: 36rpx;
  line-height: 36rpx;
}
.jf{
  width: 44rpx;
  height: 40rpx;
}
.pointnum{
  margin-left: 20rpx;
  color:white;
  font-size: 48rpx;
  line-height: 36rpx;
}
.pointtitle{
  margin-top: 20rpx;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color:white;
  font-size: 30rpx;
  line-height: 36rpx;
}
.pointmingxi{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 90rpx 0rpx 0rpx 0rpx;
}

data: {
      point:8765,
      detaillist:[
        {
          title:"购物消费",
          time:"2018-09-27",
          point:"-100",
          isAdd:false,
        },
        {
          title: "购物消费",
          time: "2018-09-27",
          point: "+100",
          isAdd: true,
        },
        {
          title: "购物消费",
          time: "2018-09-27",
          point: "-100",
          isAdd: false,
        },
        {
          title: "购物消费",
          time: "2018-09-27",
          point: "+100",
          isAdd: true,
        },
        {
          title: "购物消费",
          time: "2018-09-27",
          point: "+100",
          isAdd: true,
        }
      ],
}