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

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

第一步：卡片的切换

 

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

​

css:

 

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

 

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

 

1

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

 

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

 

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

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

 

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

 

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

 

1

<br>.card_info {<br>width: 100%;<br>position: absolute;<br>left: 0;<br>top: 0;<br>height: 100%;<br>&.card_info1 {<br>.person-img {<br>width: 217rpx;<br>height: 268rpx;<br><br>position: absolute;<br>top: 112rpx;<br>left: 77rpx;<br>display: flex;<br>align-items: center;<br>justify-content: center;<br>}

 

这是第二个样式

1

<br>&.card_info2 {<br>.person-img {<br>display: flex;<br>align-items: center;<br>justify-content: center;<br>width: 200rpx;<br>height: 240rpx;<br><br>position: absolute;<br>top: 140rpx;<br>right: 62rpx;<br>}<br>.company-all {<br>display: flex;<br>align-items: center;<br>position: absolute;<br>top: 82rpx;<br>left: 57rpx;}<br>}

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