【无标题】vue+uniapp 实现颜色切换

效果图

轮播切换

<view class="mushoe_type">
			<swiper class="swiper" :current="curDot" :circular='circular' @change="swiperChange">
				<swiper-item v-for="(item, index) in list" :key="index">
					<image :src="item.img" mode=""></image>
					<view class="detail-box box_margin_min box_flex_space-between">
						<view class="left-back" @click.stop="leftImg">
							<image src="../../static/icon/img/ic_left.png" mode=""></image>
						</view>
						<view class="shoe_detail">
							<view class="shoe_a title">
								{{item.title}}
							</view>
							<view class="shoe_a">
								{{item.title_txt}}
							</view>
							<view class="shoe_a en">
								—— {{item.title_en}} ——
							</view>
						</view>
						<view class="right-forword" @click.stop="rightImg">
							<image src="../../static/icon/img/ic_right.png" mode=""></image>
						</view>
					</view>
				</swiper-item>
			</swiper>
			<view class="type_color box_flex_space-around">
				<view class="shoe_color" :style="{borderColor:item.color}" :class="{ active: curDot ==  index }" v-for="(item, index) in list" @click="choseColor(index,item.color)">
				//:style="{borderColor:item.color}"改变边框颜色
					 <view class="colors" :style="{'background-color':item.color}"></view>
				</view>
			</view>
		</view>

<script>
	export default {
		data() {
			return {
				curDot:'',
				circular:true,
				list:[
					{
						img:'https://www.louisvuitton.cn/images/is/image/lv/1/PP_VP_L/%E8%B7%AF%E6%98%93%E5%A8%81%E7%99%BB-run-55-%E9%AB%98%E5%B8%AE%E8%BF%90%E5%8A%A8%E9%9E%8B--AM4U2ATX02_PM2_Front%20view.png?wid=656&hei=656',
						color:'#000000',
						title:'JIMI',
						title_txt:'JOGGING SERIES JM.Mo1',
						title_en:'慢跑系列'
					},
					{
						img:'https://www.louisvuitton.cn/images/is/image/lv/1/PP_VP_L/%E8%B7%AF%E6%98%93%E5%A8%81%E7%99%BB-lv-archlight-%E8%BF%90%E5%8A%A8%E9%9E%8B--AM5U2BTXRC_PM2_Front%20view.png?wid=656&hei=656',
						color:'#D9001B'
					},
					{
						img:'https://www.louisvuitton.cn/images/is/image/lv/1/PP_VP_L/%E8%B7%AF%E6%98%93%E5%A8%81%E7%99%BB-lv-archlight-%E8%BF%90%E5%8A%A8%E9%9E%8B--AE5U6BSL01_PM2_Front%20view.png?wid=656&hei=656',
						color:'#F59A23'
					},
					{
						img:'https://www.louisvuitton.cn/images/is/image/lv/1/PP_VP_L/%E8%B7%AF%E6%98%93%E5%A8%81%E7%99%BB-run-55-%E8%BF%90%E5%8A%A8%E9%9E%8B--AM4U1AMI52_PM2_Front%20view.png?wid=656&hei=656L',
						color:'#FFE600'
					},
					{
						img:'https://www.louisvuitton.cn/images/is/image/lv/1/PP_VP_L/%E8%B7%AF%E6%98%93%E5%A8%81%E7%99%BB-lv-archlight-%E8%BF%90%E5%8A%A8%E9%9E%8B--AM5U2BTXBR_PM2_Front%20view.png?wid=656&hei=656',
						color:'#02A7F0'
					}
				]
			}
		},
		onLoad() {
		},
		onShow() {
		},
		mounted() {

		},
		methods: {
			swiperChange(e){
				this.curDot = e.detail.current;
			},
			choseColor(e,colors){
				this.curDot = e
			},
			leftImg(){//左移
			    this.circular = false
				let num = this.list.length - 1
				if (this.curDot <= 0) {

			        this.circular = true

					this.curDot = num
				} else {
					this.curDot--
				}
			},
			rightImg(){//右
			    this.circular = true
				let num = this.list.length - 1
				if (this.curDot >= num) {
					this.curDot = 0
				} else {
					this.curDot++
				}
			}
		}

	}
</script>

.mushoe_type{
		.swiper{
			height:800rpx;
			padding: 0 20rpx;
			image{
				height: 75%;
				width: 100%;
			}
			.bgColor{
				color: #000;
			}
		}
		.detail-box{
			text-align: center;
			image{
				width: 60rpx;
				height: 60rpx;
			}
			.shoe_a{
				height: 50rpx;
				font-size: 28rpx;
				color: #999999;
			}
			.title{
				font-size: 38rpx;
				font-weight: bold;
				color: #000;
			}
			.en{
				color:#94ACB1;
			}
		}
	}
	.type_color{
		height: 80rpx;
		padding: 0 100rpx;
		.shoe_color{
			width:60rpx;
			height: 60rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			&.active{
				border: 2rpx solid #3F4040;//原始样式，点击添加边框
				border-radius: 50px;
			}
			.colors{
				width: 40rpx;
				height: 40rpx;
				border-radius: 50px;
			}
		}
	}