前端uniapp卡片滑动,前端飞卡,前端实现类似“探探“卡片滑动效果

 实现原理/思路:

通过监听元素上的触摸事件来改变元素在的x轴位置以及倾斜角度来实现划走效果

html部分

<view class="card-container" v-if="card_list.length>0">
     <view v-for="(card, index) in card_list"
          :key="index" class="card" 
          :style="{zIndex:card_list.length - index, transform:`translateX(${card.offsetX}px) 
          rotate(${card.rotate}deg)`,background:card.color,opacity:card.opacity}" 
           @touchstart="handleTouchStart(card, $event)"
           @touchmove="handleTouchMove(card, $event)" 
           @touchend="handleTouchEnd(card, $event)">
            //这儿放你要的卡片内容
           <indexCard :type="card.type"></indexCard>
      </view>
 </view>

js部分

滑动开始时:记录卡片位置

滑动中:将滑动距离减去初始记录的位置就是卡片在x轴上的偏移距离,同时给卡片添加倾斜效果,

滑动结束时:如果滑动超过一定距离,则删除此卡片,并且将卡片偏移距离增加移除屏幕从而实现飞出效果

//data中的数据
card_list: [{
                        startX: 0,
                        offsetX: 0,
                        rotate: 0,
                        color: '#fee258',
                        opacity: 1,
                        type:'employ_analysis'
                    },
                    {
                        startX: 0,
                        offsetX: 0,
                        rotate: 0,
                        color: '#00cd85',
                        opacity: 1,
                        type:'resume_diagnosis'
                    },
                    {
                        startX: 0,
                        offsetX: 0,
                        rotate: 0,
                        color: '#3d74fc',
                        opacity: 1,
                    },
                ]

//methods方法
handleTouchStart(card, event) {
              card.startX = event.touches[0].clientX;
},
handleTouchMove(card, event) {
                const deltaX = event.touches[0].clientX - card.startX;
                card.offsetX = deltaX;
                let rotate = deltaX * 0.4
                if (rotate > -15 && rotate < 15) {
                    card.rotate = rotate
                }
},
handleTouchEnd(card, event) {
                if (Math.abs(card.offsetX) > 100) {
                    // 如果滑动距离超过阈值，移走卡片
                    if (card.offsetX > 0) {
                        card.offsetX = 400
                    } else {
                        card.offsetX = -400
                    }
                    setTimeout(() => {
                        card.offsetX = 0
                        card.rotate = 0
                        card.opacity = 0
                        setTimeout(() => {
                            this.card_list.splice(0, 1)
                        }, 300)
                    }, 300)
                    
                } else {
                    // 否则重置卡片位置
                    card.offsetX = 0;
                    card.rotate = 0
                }
  },

css部分

// 卡片滑动部分
    .card-container {
        padding-top: 28rpx;
        position: relative;
        height: 600rpx;
        padding: 0 30rpx;
        width: 100%;

        .card {
            position: absolute;
            top: 28rpx;
            width: 690rpx;
            height: 560rpx;
            background-color: rebeccapurple;
            border-radius: 10px;
            box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease, rotate 0.2s ease;
            transform-origin: center center;
            &:nth-child(2){
                top: 50rpx;
                transform: scale(0.96) !important;
            }
            &:nth-child(3){
                top: 70rpx;
                transform: scale(0.94) !important;
            }
        }
    }