uni-app 实现列表左右滑动按钮编辑功能

背景

最近在使用我的记账小程序随手记个账时，在实际消费记账后会产生退款，而记账系统原账单有退款时没有很好的体现出来，于是为了解决这一痛点，设计了账单左滑记退款功能，并在原账单上标记上当前账单有退款，并将新账单标记为退款账单。

原理

左右滑动操作按钮的本质是通过触摸事件捕获用户手势，结合动态样式实现UI交互。其核心流程包括：
触摸事件监听：通过@touchstart和@touchend记录滑动起点和终点坐标；
滑动方向判断：计算横向位移差判断左右滑动，通过阈值过滤无效滑动；
动态样式绑定：根据touchmove实时计算滑动距离并修改元素的transform属性，实现按钮显隐动画。

代码实现

页面代码如下

<view class="swipe-item" v-for="(cash) in cashList" :data-id="cash.id" :key="cash.id" :data-index="index"
    @touchstart="touchStart" @touchmove="touchmove" @touchend="touchend" :style="'transform:translateX(' + cash.right + 'px)'">
    <view class="edit" @click="edit">不计入收支</view>
    <view class="remove" @click="refund">退  款</view>
</view>

TS脚本如下

开始触摸滑动脚本，滑动开始时赋值偏移值为上一次滑动偏移值，不存在则默认为0

const touchStart = (e: { touches: { clientX: any; }[]; currentTarget: { dataset: { index: number; id: number; }; }; }) => {
    startX.value = e.touches[0].clientX;
    const index = e.currentTarget.dataset.index;
    const id = e.currentTarget.dataset.id;
    cashList.value[index].forEach((item: { id: number; right: any; }) => {
        if(item.id === id) {
            startRight.value = isEmpty(item.right) ? 0 : item.right;
            return;
        }
    });
};

触摸滑动脚本，偏移值设置为上一次偏移值加上当前滑动偏移值

const touchmove = (e: { currentTarget: { dataset: { id: number; index: number; }; }; touches: { clientX: number; }[]; }) => {
    cashList.value.forEach((item => item.right = undefined));
    const id = e.currentTarget.dataset.id;
    const index = e.currentTarget.dataset.index;
    const moveX = startX.value - e.touches[0].clientX;
    cashList.value[index].forEach((item: { id: number; type: number; right: number; }) => {
        if(item.id === id) {
            item.right = startRight.value - moveX;
            return;
        }
    });
}

触摸滑动结束脚本，判断最终滑动距离是否符合按钮显示最低距离

const touchend = (e: { currentTarget: { dataset: { index: number; id: number; }; }; }) => {
    const index = e.currentTarget.dataset.index;
    const id = e.currentTarget.dataset.id;
    cashList.value[index].forEach((item: { id: number; right: any; }) => {
        if(item.id === id) {
            item.right = (item.right < 0) ? (item.right < -40 ? -80 : undefined) : (item.right >= 50 ? 100 : undefined);
            return;
        }
    });
}

css样式

这里给出一个简单样式，样式根据系统实际样式调整即可

.remove {
    width: 80px;
    height: 35px;
    background-color: red;
    color: #FFFFFF;
    position: absolute;
    top: 0;
    right: -80px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
}

.edit{
    width: 100px;
    height: 100%;
    background-color: green;
    color: white;
    position: absolute;
    top: 0;
    left: -100px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
}

小结

至此，一个简单的滑动操作按钮就实现好了，实际效果如下图所示：