uniapp中购物车滑动显示删除（参考uniapp插件liuSwipeAction）

components中新建一个

<template>
    <view class="liu-slide">
        <view class="liu-slide-left" :style="'position: relative;left:'+left+'rpx'" @touchstart="touchstart"
            @touchmove="touchmove" @touchend="touchend">
            <slot></slot>
        </view>
        <view class="liu-slide-right">
            <view class="btn-item" v-for="(item,index) in btnList" :key="index"
                :style="'width:'+item.width+';height:'+height+'rpx;background-color:'+item.bgColor+';color:'+item.color+';font-size:'+item.fontSize"
                @click.stop="clickItem(item)">
                {{item.name}}
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        props: {
            //操作按钮数组
            btnList: {
                type: Array,
                default: () => {
                    return [{
                        id: '1',
                        name: '编辑',
                        width: '100rpx',
                        bgColor: '#5f92f7',
                        color: '#FFFFFF',
                        fontSize: '28rpx'
                    }, {
                        id: '2',
                        name: '删除',
                        width: '100rpx',
                        bgColor: '#ed656d',
                        color: '#FFFFFF',
                        fontSize: '28rpx'
                    }]
                }
            },
            //当前列索引
            index: {
                type: Number,
                require: true,
                default: 0
            },
            //是否禁用
            disable: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
                x: 0,
                left: 0,
                operation: 0,
                height: 0,
                screenWidth: 0
            };
        },
        mounted() {
            this.$nextTick(res => {
                const systemInfo = uni.getSystemInfoSync()
                this.screenWidth = systemInfo.screenWidth
                this.getBtnWidth()
                this.getListHeight()
            })
        },
        methods: {
            clickItem(e) {
                this.$emit('clickItem', {
                    index: this.index,
                    id: e.id
                })
            },
            //重置方法
            reset() {
                this.left = 0
            },
            getBtnWidth() {
                let view = uni.createSelectorQuery().in(this).select(".liu-slide-right");
                view.boundingClientRect(rect => {
                    this.operation = this.px2rpx(rect.width, this.screenWidth)
                }).exec()
            },
            getListHeight() {
                let view = uni.createSelectorQuery().in(this).select(".liu-slide-left");
                view.boundingClientRect(rect => {
                    this.height = this.px2rpx(rect.height, this.screenWidth)
                }).exec()
            },
            px2rpx(px, screenWidth) {
                return px / (screenWidth / 750)
            },
            touchstart(e) {
                if(this.disable) return
                this.x = this.px2rpx(e.touches[0].clientX, this.screenWidth)
            },
            touchmove(e) {
                if(this.disable) return
                let clientX = this.x - this.px2rpx(e.touches[0].clientX, this.screenWidth)
                if (clientX <= 0) this.left = 0
                else if (this.operation <= clientX) this.left = this.operation * -1
                else this.left = clientX * -1
            },
            touchend(e) {
                if(this.disable) return
                let clientX = this.x - this.px2rpx(e.changedTouches[0].clientX, this.screenWidth)
                this.left = clientX > this.operation / 2 ? this.operation * -1 : 0
            },
        }
    }
</script>

<style scoped>
    .liu-slide {
        width: 100%;
        position: relative;
        overflow: hidden;
    }

    .liu-slide-left {
        width: 100%;
        overflow: hidden;
        background-color: #FFFFFF;
        transition: left 0.2s ease-in-out;
        z-index: 999;
    }

    .liu-slide-right {
        position: absolute;
        top: 0rpx;
        right: 0;
        z-index: 99;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }

    .btn-item {
        display: flex;
        align-items: center;
        justify-content: center;
    }
</style>

<template>
    <view class="">
        <NavBar title='我的'></NavBar>
        <view class="slide-main">
            <view class="list" v-for="(item,index) in list" :key="index">

                // 这里
                <liu-swipe-action :index="index" @clickItem="clickItem">
                    <view class="item">
                        <image class="item-img"
                            src="https://cdn.pixabay.com/photo/2022/03/31/14/53/camp-7103189_1280.png">
                        </image>
                        <view class="item-name">{{item}}</view>
                    </view>
                </liu-swipe-action>
            </view>
        </view>
    </view>

</template>

<script>
    import liuSwipeAction from '@/components/liu-swipe-action/liu-swipe-action.vue'

    export default {
        components: {
            liuSwipeAction
        },
        data() {
            return {
                list: ['第1条', '第2条', '第3条', '第4条', '第5条', '第6条']
            }
        },
        methods: {
            //点击操作回调事件
            clickItem(e) {
                console.log('所点击的列表索引：' + e.index)
                console.log('所点击的按钮id：' + e.id)
            }
        }
    }
</script>

<style scoped>
    .slide-main {
        width: 100%;
        height: 100vh;
        background-color: #f0f0f0;
    }

    .list {
        width: 100%;
        margin-top: 1px;
    }

    .item {
        width: 100%;
        height: 120rpx;
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }

    .item-img {
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
        margin-left: 28rpx;
    }

    .item-name {
        margin-left: 16rpx;
        font-size: 30rpx;
        color: #666666;
    }
</style>