颜色滤镜，在好多网页都这样使用，滤掉彩色，显示黑白，这在一些关键的日子中都这样使用。
1、依然回到订单确认页面
看到支付的颜色了嘛？
<view class="payType">
<view class="box" :class="item.value==payDefValue ? 'active' : ''" v-for="item,index in payType"
:key="index" @click="clickBtn(item.value)">
<u-icon :name="item.icon" size="26" class="icon"
:color="item.value==payDefValue ? item.color :''"></u-icon>
<text class="font">{{item.name}}</text>
<!--
<u-icon name="weixin-fill" size="26" class="font"></u-icon>
<text class="font">微信</text>
-->
</view>
</view>很明显这里的颜色是 color 来决定
读取到什么支付就是什么颜色，支付宝 蓝色 ，微信 绿色
这里的color 控制的是图形的颜色，哪还有边框和字体？
2、整体颜色变化
通过active 这个class 在样式中来控制
2.1 如果读取到系统是微信 就是 微信支付 为默认， 那么 图像就是绿色的微信支付，
然后 字体和边框 就会根据class 来决定 谁是active
class="item.value==payDefValue ? 'active' : ''"
然后样式中也会识别到底是哪一个active被调用。
<style lang="scss">
page {
background-color: $page-bg-color; //页面背景色
}
.paypage {
padding: 30rpx;
.goodsList {
margin-top: 30rpx;
}
.payType {
@include flex-box();
.box {
//box 就两个支付方式
width: 45%; //一个支付方式站49 剩下中间的2的空格
height: 75rpx;
background: #fff;
border-radius: 10rpx;
@include flex-box-set();
// filter: grayscale(100%); //滤镜效果 100%把颜色全滤掉 我们已经用了 :color="item.value==payDefValue ? item.color :''" 就不用滤镜了
border: 1rpx solid #fff;
.font {
padding-left: 10rpx;
}
}
//可以这样 当用text时，若用view + style 就不用下面的方式
.box:first-child.active {
border-color: #1578ff; //边框颜色
color: #1578ff;
}
.box:last-child.active {
border-color: #04c15f;
color: #04c15f;
}
}
.payTabbar {
position: fixed;
width: 100%;
bottom: 0;
left: 0
}
}
</style>2.2 如果不是默认，用户想要选择
在刚刚的页面view 中，有一个按钮 @click="clickBtn(item.value)
方法中，就实现了 点击按钮 就选择该支付，
那么相应改变了支付方式
methods: {
//切换支付方式
clickBtn(type) {
this.payDefValue = type
}
}，支付方式改变，就显示哪一个图像选中，边框和字体的class 就active
颜色都随之变化。
3、filter 颜色滤镜
讲到上面，其实颜色都可以实现变化了，但是还有一个主要的工具 filter
这里还有一个全局filter 颜色滤镜
filter: grayscale(100%);
//滤镜效果 100%把颜色全滤掉 我们已经用了 :color="item.value==payDefValue ? item.color :''" 就不用滤镜了
通过他就可以全局改变了颜色，变成黑白 filter: grayscale(100%);
改回原来的颜色： filter: grayscale(0%);
如果你要使用这个也可以实现：我们上面颜色的变化。
<style lang="scss">
page {
background-color: $page-bg-color; //页面背景色
}
.paypage {
padding: 30rpx;
.goodsList {
margin-top: 30rpx;
}
.payType {
@include flex-box();
.box {
//box 就两个支付方式
width: 45%; //一个支付方式站49 剩下中间的2的空格
height: 75rpx;
background: #fff;
border-radius: 10rpx;
@include flex-box-set();
//filter: grayscale(100%); //滤镜效果 100%把颜色全滤掉 我们已经用了 :color="item.value==payDefValue ? item.color :''" 就不用滤镜了
border: 1rpx solid #fff;
.font {
padding-left: 10rpx;
}
}
//可以这样 当用text时，若用view + style 就不用下面的方式
.box:first-child.active {
border-color: #1578ff; //边框颜色
color: #1578ff;
//filter: grayscale(0%)
}
.box:last-child.active {
border-color: #04c15f;
color: #04c15f;
//filter: grayscale(0%)
}
}
.payTabbar {
position: fixed;
width: 100%;
bottom: 0;
left: 0
}
}
</style>上面的样式里，也就写了 filter 但是我用1-2 的步骤完成了颜色变化的功能，我就注释。
