小程序层叠卡片滑动效果
效果图
wxml
<!-- 轮播wxml代码 -->
<view class="teachers_banner">
<view class="lunbo_center clearfix teachers_b">
<view class="slide" id="slide" bindtouchstart='moveStart' bindtouchend='moveItem'>
<ul>
<block wx:for="{
{datas}}" wx:key>
<li animation="{
{item.animation}}" style="z-index: {
{item.zIndex}} ;opacity:{
{item.opacity}};"
bindtap="choose" data-id="{
{item.id}}">
<image src="{
{item.iamge}}" />
</li>
</block>
</ul>
</view>
</view>
</view>
wxss
/*轮播图片*/
.lunbo_center {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 50rpx 0;
box-sizing: border-box;
}
.teachers_b {
position: relative;
}
#slide {
margin: 0 auto;
width: 100%;
height: 160px;
position: relative;
}
#slide li {
position: absolute;
width: 600rpx;
height: 300rp