85 lines
1.7 KiB
Vue
85 lines
1.7 KiB
Vue
<!--
|
||
* @Author: dfh
|
||
* @Date: 2023-01-06 16:41:51
|
||
* @LastEditors: dfh
|
||
* @Modified By: dfh
|
||
* @describe: 侧滑删除
|
||
-->
|
||
<template>
|
||
<view class="card-wrap" :style="{
|
||
width: `calc(100% + ${slideWidth}rpx)`,
|
||
marginLeft: '-' + slideWidth + 'rpx',
|
||
transform: isTouchMove ? `translateX(0px)` : `translateX(${slideWidth}rpx)`
|
||
}">
|
||
<view class="content" @touchstart="touchStartHandle" @touchend="touchEndHande">
|
||
<slot name="card" />
|
||
<slot name="delete" />
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
props: {
|
||
slideWidth: {
|
||
type: Number,
|
||
default: 0
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
touchStartX: "",
|
||
isTouchMove: false, //向左滑动：true,显示删除按钮
|
||
screenWidth: 0
|
||
};
|
||
},
|
||
created() {
|
||
const {
|
||
screenWidth
|
||
} = uni.getSystemInfoSync();
|
||
this.screenWidth = screenWidth;
|
||
console.log(screenWidth);
|
||
uni.$on("slide-close", () => {
|
||
console.log("slide-close");
|
||
this.isTouchMove = false;
|
||
});
|
||
},
|
||
|
||
methods: {
|
||
touchStartHandle(e) {
|
||
this.touchStartX = e.changedTouches[0].clientX;
|
||
},
|
||
touchEndHande(e) {
|
||
const touchStartX = this.touchStartX;
|
||
const touchEndX = e.changedTouches[0].clientX;
|
||
//向左滑动touchEndX < touchStartX
|
||
if (touchStartX - touchEndX > 80) {
|
||
uni.$emit("slide-close");
|
||
this.isTouchMove = true;
|
||
} else {
|
||
this.isTouchMove = false;
|
||
}
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="css" scoped>
|
||
.card-wrap {
|
||
position: relative;
|
||
box-sizing: border-box;
|
||
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.content {
|
||
width: 100%;
|
||
display: flex; align-items: flex-end; justify-content: space-between;
|
||
}
|
||
|
||
/* 左移动 */
|
||
.move-left {
|
||
transform: translateX(0rpx);
|
||
}
|
||
</style>
|