小程式wepy框架，前段時間做的專案使用到滑動刪除功能，然後自己寫了個元件，話不多說，直接上程式碼
<style lang=”less”>
.swipe-item-wrapper{
overflow: hidden;
position: relative;
.swipe-item-wrapper-action {
position: absolute;
z-index: 2;
background: transparent;
height: 100%;
width: 100%;
top: 0;
display: none;
}
.swipe-item-wrapper-action-popup {
display: block;
}
.swipe-actions{
width: 80rpx;
position: absolute;
top: 0;
bottom: 0;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
visibility: hidden;
white-space: nowrap;
z-index: 10;
}
.actions-right {
right: 0;
}
.actions-visibility {
visibility: visible;
}
.swiper-item-wrapper-content {
width: 100%;
}
.swiper-item-wrapper-content-slide {
transform: translate(-80rpx);
}
.swipe-btn{
flex: 1;
height: 100%;
min-height: 90rpx;
line-height: 90rpx;
text-align: center;
color: white;
display: flex;
justify-content: center;
align-items: center;
&.del{
background-color: rgb(244, 51, 60);
}
&.edit{
background-color: rgb(16, 142, 233);
}
}
}
</style>
<template>
<view class=”swipe-item-wrapper”
id=”{{swipeData.id}}”
@touchstart=”tStart”
@touchmove=”tMove”
@touchend=”tEnd”>
<view class=”swipe-item-wrapper-action {{swipeData.id == slideIndex ? `swipe-item-wrapper-action-popup` : “}}”></view>
<view class=”swipe-actions actions-right {{swipeData.id == slideIndex ? `actions-visibility` : “}}”>
<view class=”swipe-btn del” @tap.stop=”handleRightBtnTap({{ swipeData }})”>刪除</view>
</view>
<view class=”swiper-item-wrapper-content {{swipeData.id == slideIndex ? `swiper-item-wrapper-content-slide` : “}}”>
<slot></slot>
</view>
</view>
</template>
<script>
import wepy from `wepy`
export default class WepyDelete extends wepy.component {
props = {
swipeData: {
type: Object,
default: {},
twoWay: true
}
}
data = {
startX: 0,
startY: 0,
endX: 0,
endY: 0,
distenceX: 0,
moveX: null,
swiperData: {},
slideIndex: null,
}
onLoad () {}
watch = {
swipeData(newValue, oldValue) {
// console.log(newValue, oldValue)
}
}
// 獲得角度
getAngle(angx, angy) {
return Math.atan2(angy, angx) * 180 / Math.PI;
};
// 根據起點終點返回方向 1向上 2向下 3向左 4向右 0未滑動
getDirection(startx, starty, endx, endy) {
let angx = endx – startx;
let angy = endy – starty;
let result = `no`;
// 如果滑動距離太短
if (Math.abs(angx) < 2 && Math.abs(angy) < 2) {
return result;
}
let angle = this.getAngle(angx, angy);
if (angle >= -135 && angle <= -45) {
result = `up`;
} else if (angle > 45 && angle < 135) {
result = `down`;
} else if ((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) {
result = `left`;
} else if (angle >= -45 && angle <= 45) {
result = `right`;
}
return result;
};
methods = {
tStart (e) {
if (e.touches.length === 1) {
this.startX = e.touches[0].clientX
this.startY = e.touches[0].clientY
this.moveX = e.touches[0].clientX
this.$apply()
}
},
tMove (e) {
if (e.touches.length === 1) {
// 手指起始點位置與移動期間的差值
let distenceX = this.moveX – e.touches[0].clientX
this.distenceX = distenceX;
this.$apply()
}
},
tEnd (e) {
if (e.changedTouches.length === 1){
this.endX = e.changedTouches[0].clientX
this.endY = e.changedTouches[0].clientY
this.$apply()
let result = this.getDirection(this.startX, this.startY, this.endX, this.endY)
if (((this.distenceX) > 50) && (result == `left`)) {
this.slideIndex = e.currentTarget.id
} else if (((this.distenceX) < 0) && (result == `right`)) {
this.slideIndex = null
} else {
this.slideIndex = null
}
}
},
handleRightBtnTap(item) {
item = JSON.parse(JSON.stringify(item))
this.$emit(`delItem`, item)
},
slideHideBtn(label) {
this.slideIndex = null
}
}
}
</script>