小程序层叠卡片滑动效果

小程序层叠卡片滑动效果

效果图

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