直播电商平台开发，uni-app实现卡片切换效果

直播电商平台开发，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;

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;

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

以上就是直播电商平台开发，uni-app实现卡片切换效果， 更多内容欢迎关注之后的文章