36 行
1.1 KiB
Plaintext
36 行
1.1 KiB
Plaintext
<template>
|
|
<view class="root">
|
|
<template v-for="(item,index) in cardList" :key="index">
|
|
<card :img="item" :cardIndex="index"></card>
|
|
</template>
|
|
</view>
|
|
</template>
|
|
<script setup lang="uts">
|
|
/**
|
|
* @description: 支持在卡片堆叠中左右滑动当前卡片，并根据方向触发喜欢或不喜欢的划走反馈。
|
|
* @logic: 页面按顺序渲染多张卡片，用户拖拽顶部卡片时实时跟随手势移动，松手后根据位移决定回弹或飞出并切换到下一张卡片。
|
|
* @optimization: 卡片通过复用同一组位置层级和全局浮动事件维持堆叠顺序，减少每次划走后重新创建整组卡片的开销。
|
|
*/
|
|
|
|
import card from './card/card.uvue';
|
|
|
|
const cardList = ref([
|
|
'https://web-ext-storage.dcloud.net.cn/hello-uni-app-x/drop-card-1.jpg',
|
|
'https://web-ext-storage.dcloud.net.cn/hello-uni-app-x/drop-card-2.jpg',
|
|
'https://web-ext-storage.dcloud.net.cn/hello-uni-app-x/drop-card-3.jpg'
|
|
] as string.ImageURIString[])
|
|
</script>
|
|
<style>
|
|
/* #ifdef MP */
|
|
page {
|
|
overflow: hidden
|
|
}
|
|
/* #endif */
|
|
|
|
.root {
|
|
flex: 1;
|
|
position: relative;
|
|
align-items: center;
|
|
}
|
|
</style>
|