vue实现列表项左滑删除功能

效果图

image.png

实现思路
1、滑块内容和操作按钮通过定位让他们处于同一行，并且操作按钮是隐藏状态。
2、记录滑动的滑块的启示滑动位置和滑动结束是的位置，来判断是左滑还是右滑。
3、如果是左滑，就动态修改当前滑块的定位的位置。致使操作按钮显示出来。

代码：

    <view class="content">
        <view class="item" v-for="(item,index) in 4" :key='index'>
            <view class="it" :id='index' :style="{'left':cruentIndex==index?left:'0'}" @click="cheaks(item)"  @touchstart="touchstart" @touchmove="touchmove">
                <slot name="items">asdasdasdasdasdasdasd</slot>
            </view>
            <view class="del" :style="{'right':cruentIndex==index?right:'-150rpx'}">删除</view>
        </view>
    </view>
</template>

<script>
    export default {
        props:{
            item:Object
        },
        data() {
            return {
                lastIndex:'',
                cruentIndex:'',
                startX: '',
                endX: '',
                left: '',
                right: '',
            }
        },
        methods: {
            cheaks(item){  
                console.log(item)
            },
            touchstart(e) {
                let index = e.currentTarget.id   记录当前滑动的滑块的index
                this.startX = e.touches[0].clientX   获取其实滑动位置
                if(this.lastIndex!==index){  判断本次滑动的滑块是不是和上一次滑动的滑块相同。如果不同，则需要把上一次滑动的滑块归位
                    this.cruentIndex = this.lastIndex
                    this.right = '-150rpx'
                    this.left = '0'
                }
            },
            touchmove(e) {
                this.endX = e.touches[0].clientX   获取滑动结束位置
                let index = e.currentTarget.id  获取当前滑动的滑块的index，在遍历的时候有绑定。
                let cha = this.startX - this.endX  计算滑动启示位置和结束位置的差值

                if (cha > 30) {  启示位置大于结束位置说明是左滑。具体大多少值根据实际情况更改
                    this.cruentIndex = index  记录当前滑动的滑块的index。用作dom动态更改样式。
                    this.right = '0' 
                    this.left = '-150rpx'
                } else {
                                    表示右滑，操作跟左滑相反即可
                    this.cruentIndex = index  
                    this.right = '-150rpx'
                    this.left = '0'
                }
                this.lastIndex = this.cruentIndex  记录本次滑动的滑块的index。滑动另一个滑块是需要用到
            }
        }
    }
</script>

<style lang="scss" scoped>
    .content {
        width: 100vw;
    }

    .item {
        position: relative;
        display: flex;
        align-items: center;
        border-top: 2rpx solid #ddd;
        height: 100rpx;
        background-color: #0062CC;

        .it {
            transition: .4s;
            height: 100%;
            position: absolute;
            left: 0;
            width: 100%;
        }

        .del {
            transition: .4s;
            position: absolute;
            right: -150rpx;
            background-color: red;
            height: 100%;
            width: 150rpx;
            color: #fff;
            text-align: center;
            line-height: 100rpx;
        }
    }
</style>

此demo是uni版小程序demo。h5的话可能滑动函数传过来的dom实例的属性值会不太一样。根据具体的修改即可。逻辑部分可不更改。