当前位置：首页 > news >正文

uniapp-商城-36-shop 购物车选好了进行订单确认2 支付方式颜色变化和颜色滤镜filter

news 来源：原创 2025/4/27 8:33:15

颜色滤镜，在好多网页都这样使用，滤掉彩色，显示黑白，这在一些关键的日子中都这样使用。

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 的步骤完成了颜色变化的功能，我就注释。