uni-app实现卡片切换效果

第一步：先看效果

第二步：卡片的切换

<view class='bgDemo'>
				<view v-for="item,index in objectMultiArray" :key="index" @click='bindMultiPickerChange2'
					:data-id="index" style='z-index:50;'>
					<image :src="item.url" mode='widthFix' :class="isActiveFn(item)?'selected':'nselected'"></image>
				</view>
			</view>

css:

.bgDemo {
			position: relative;
			display: flex;
			align-items: center;
			overflow-x: scroll;
			overflow-y: hidden;
			width: 100%;
			height: 150rpx;
		}

这里面的一个选中当前卡片的样式是通过这个方法实现的；

isActiveFn(item) {
				let flag = false
				if (this.myData.backgroundImage && item.url) {
					let bg1 = this.myData.backgroundImage.replace("http://fast.xx.com/mingpian/bg", "");
					let url1 = item.url.replace("http://fast.xx.com/mingpian/%E5%90%8D%E7%89%87", "");
					if (bg1 == url1) {
						flag = true
					}
				}
				return flag
			},

这里是通过点击不同的卡片掉接口传背景图来进行改变背景图的，重点是这里的css变换

第三步：切换卡片内部的样式

这里我们是有四个卡片的样式，可以看到四个卡片的样式都是不一样的；

<view class="card_info"
	:class="{card_info1:idType === 1,card_info2:idType === 2,card_info3:idType === 3,card_info4:idType === 4}">

在这里是通过四个css实现的，包裹在内部的样式，每一个卡片都不一样

.card_info {
			width: 100%;
			position: absolute;
			left: 0;
			top: 0;
			height: 100%;

			&.card_info1 {
				.person-img {
					width: 217rpx;
					height: 268rpx;
					background-color: #DACDB8 !important;
					position: absolute;
					top: 112rpx;
					left: 77rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}

这是第二个样式

&.card_info2 {
				.person-img {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 200rpx;
					height: 240rpx;
					background-color: #616D7E !important;
					position: absolute;
					top: 140rpx;
					right: 62rpx;
				}

				.company-all {
					display: flex;
					align-items: center;
					position: absolute;
					top: 82rpx;
					left: 57rpx;}
					}

一层一层的套住，然后写好css；