125 lines
2.3 KiB
Vue
125 lines
2.3 KiB
Vue
<template>
|
|
<view class="part_content" :class="{ 'overflow-visible': isopen }">
|
|
<view class="part" @touchstart="part_start" @touchmove="part_move" @touchend="part_end"
|
|
:style="{ transform: 'translateX(' + offsetx + 'px)'}">
|
|
<p>{{part_title}}</p>
|
|
<p>{{part_content}}</p>
|
|
</view>
|
|
<view class="detele" :style="{ transform: 'translateX('+ (movemax +rightoffsetx+5) + 'px)' }"
|
|
>
|
|
删除
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
part_title: {},
|
|
part_content: {},
|
|
index: Number
|
|
},
|
|
data() {
|
|
return {
|
|
startX: 0,
|
|
startOffset: 0,
|
|
offsetx: 0,
|
|
rightoffsetx: 20,
|
|
movemax: 100,
|
|
isopen: false
|
|
}
|
|
},
|
|
methods: {
|
|
part_start(e) {
|
|
this.startX = e.touches[0].clientX;
|
|
this.startOffset = this.offsetx;
|
|
},
|
|
part_move(e) {
|
|
this.isopen = true;
|
|
let moveX = e.touches[0].clientX - this.startX;
|
|
let newOffset = this.startOffset + moveX;
|
|
|
|
if (newOffset > 0) {
|
|
newOffset = 0;
|
|
} else if (newOffset < -this.movemax) {
|
|
newOffset = -this.movemax;
|
|
|
|
}
|
|
this.rightoffsetx = newOffset;
|
|
this.offsetx = newOffset;
|
|
},
|
|
part_end(e) {
|
|
if (this.offsetx < -this.movemax / 2) {
|
|
this.offsetx = -this.movemax;
|
|
this.isopen = true;
|
|
} else {
|
|
this.offsetx = 0;
|
|
this.rightoffsetx = 20;
|
|
this.isopen = false;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.part_content {
|
|
height: 10vh;
|
|
background-color: white;
|
|
border-radius: 15px;
|
|
padding: 3%;
|
|
margin: 2%;
|
|
background-color: #fff;
|
|
overflow: hidden;
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
|
|
.part_content.overflow-visible {
|
|
overflow: visible !important;
|
|
}
|
|
|
|
.part {
|
|
width: 100%;
|
|
}
|
|
|
|
.part p:first-child {
|
|
font-size: 1.2rem;
|
|
margin-bottom: 10px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.part p:nth-child(2) {
|
|
font-size: 0.8rem;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.detele {
|
|
text-align: center;
|
|
background-color:#C2050F;
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0px;
|
|
bottom: 0;
|
|
width: 100px;
|
|
z-index: 1;
|
|
transform: translateX(100px);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #fff;
|
|
}
|
|
</style> |