uniapp滑动卡片

在uniapp中实现滑动卡片效果可以使用swiper组件。可以参考以下代码示例来实现：

<template>
  <view class="swiper-box">
    <image class="swiper-bg" :src="cardList[selectedCardIndex]" mode="aspectFill"></image>
    <swiper class="swiper" :previous-margin="cardList.length === 1 ? '20%' : selectedCardIndex === 0 ? '10%' : selectedCardIndex === cardList.length -1 ? '30%' : '20%'" :next-margin="cardList.length === 1 ? '20%' : selectedCardIndex === cardList.length -1 ? '10%' : selectedCardIndex === 0 ? '30%' : '20%'" @change="swiperChange">
      <swiper-item v-for="(swiperItem,swiperIndex) in cardList" :key="swiperIndex" style="position: relative;">
        <image :src='swiperItem' :class="{'swiper-active':selectedCardIndex == swiperIndex}"></image>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
export default {
  data() {
    return {
      selectedCardIndex: 0,
      cardList: [
        "/static/images/lervor/travel/1.jpg",
        "/static/images/lervor/travel/2.jpg"
      ]
    }
  },
  methods: {
    swiperChange(e) {
      this.selectedCardIndex = e.detail.current
    }
  }
}
</script>

<style>
.page {
  background-color: #FAFAFA;
}
.swiper-box {
  .swiper-bg {
    width: 100%;
    position: absolute;
    height: 500rpx;
    &::after {
      content: '';
      position: absolute;
      z-index: 1;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background-image: linear-gradient(to bottom ,transparent, #FAFAFA);
    }
  }
  .swiper {
    padding-top: 64rpx;
    height: 728rpx;
    image {
      width: 100%;
      height: 100%;
      transform: scale(0.78);
      transition: transform 0.3s ease-in-out 0s;
      border-radius: 26rpx;
      box-shadow: 0px 2rpx 12rpx rgba(0, 0, 0, 0.1);
      &.swiper-active {
        transform: scale(1);
      }
    }
  }
}
</style>

这段代码使用了uniapp的swiper组件来实现滑动卡片效果。在data中通过selectedCardIndex来控制当前选中的卡片索引，通过cardList来存储卡片的图片路径列表。通过swiper组件的@change事件来监听卡片切换的操作，然后更新selectedCardIndex的值。在样式中，可以调整卡片和背景的样式。<span class="em">1</span><span class="em">2</span><span class="em">3</span><span class="em">4</span>