小程序原生的一个酷酷轮播效果

最近一个朋友找我帮忙做一个小程序原生的有点3D效果的轮播，网上一搜，发现小程序原生的资源实在是少，遂自己撸一个了。

效果图如下：

js

// index.js
Page({
  data: {
    current:1,
    landscape:[
      '图片地址','图片地址','图片地址','图片地址'
    ],
  },
  
})

记得把图片地址换成真实的url

wxml

<view class="section center">
			<swiper
			 circular
			 model:current="{{current}}"
			 class="swiper-container"
			 layout-type="transformer"
			 transformer-type="scaleAndFade"
       			previous-margin="80px"
            	next-margin="80px"
				autoplay="true"
			>
				<swiper-item wx:for="{{landscape}}" wx:key="*this" >
					<image class="img {{current === index?'active':''}} {{current-1 === index?'left':''}} {{current+1 === index?'right':''}}  {{current==0&&index ==landscape.length-1?'left':''}} {{current == landscape.length-1 && index ==0? 'right':''}}"  src="{{item}}"  mode="aspectFill" />
				</swiper-item>
			</swiper>
		</view>

这个类名的判断实在是有点难堪，不知道小程序原生开发的类似vue那种计算属性怎么实现，知道的告诉我一下。

wxss

.swiper-container {
  width: 100%;
  height: 200px;
}

.img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
}

.active{
  transform: perspective(500px) translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg) scale(1);
  opacity: 1;
  transition: all 1s ease-out;
}
.left{
  transform: perspective(500px) translate3d(100px, -10px, -20px) rotateX(0deg) rotateY(50deg) scale(0.8);
  opacity: 0.6;
  transition: all 1s ease-out;
}
.right{
  transform: perspective(500px) translate3d(-100px, -10px, -20px) rotateX(0deg) rotateY(-50deg) scale(0.8);
  opacity: 0.6;
  transition: all 1s ease-out;
}