基於vue2實現左側滑刪除功能

主要功能

1. 提供側滑刪除功能
2. 第一個滑動時其他的隱藏刪除
3. 點選刪除按鈕後隱藏刪除
4. 刪除樣式可以是圖片和文字
5. 垂直滑動超過30不觸發左滑
6. 解決與上拉重新整理和下拉載入衝突
7. 降低左滑靈敏度

全部程式碼

1. 元件部分

<template>
    <div>
        <div class="slider-item" data-type="0">
            <div class="content"
                 @touchstart='touchStart'
 

                 @touchmove='touchMove'
                 @touchend='touchEnd'
                 :style="deleteSlider"
            >
                <!-- 插槽中放具體專案中需要內容         -->
                <slot></slot>
            </div>
            <div class="remove" ref='remove'
 
 @click.prevent="deleteItem(index)">
                <img src="../../img/qxsc.png"/>
                <span>取消收藏</span>
            </div>
        </div>
    </div>
</template>
<script type="text/ecmascript-6">
    export default {
        props: {
            index
 
: Number
        },
        data() {
            return {
                startX: 0,   //觸控位置
                endX: 0,     //結束位置
                moveX: 0,   //滑動時的位置
                disX: 0,    //移動距離
                deleteSlider: '',//滑動時的效果,使用v-bind:style="deleteSlider"
                lastIndex: "",
                startY: 0,   //觸控位置
                endY: 0,     //結束位置
                moveY: 0,   //滑動時的位置
            }

        },
        methods: {
            touchStart(ev){
                console.log("index:", this.index);
                this.restSlide();
                ev = ev || event

                //tounches類陣列，等於1時表示此時有隻有一隻手指在觸控式螢幕幕

                if (ev.touches.length == 1) {
                    // 記錄開始位置
                    this.startX = ev.touches[0].clientX;
                    this.startY = ev.touches[0].clientY;
                }
            },
            touchMove(ev){
                ev = ev || event;
                let parentElement = ev.currentTarget.parentElement;
                //獲取刪除按鈕的寬度，此寬度為滑塊左滑的最大距離
                let wd = this.$refs.remove.offsetWidth;
                if (ev.touches.length == 1) {
                    // 滑動時距離瀏覽器左側實時距離
                    this.moveY = ev.touches[0].clientY
                    this.moveX = ev.touches[0].clientX
                    if (Math.abs(this.moveY - this.startY) < 30) {
                        //起始位置減去 實時的滑動的距離，得到手指實時偏移距離
                        this.disX = this.startX - this.moveX;
                        // 如果是向右滑動或者不滑動，不改變滑塊的位置
                        if (this.disX < wd / 2 || this.disX == 0) {
                            this.deleteSlider = "transform:translateX(0px)";
                            parentElement.dataset.type = 0;
                            // 大於0，表示左滑了，此時滑塊開始滑動
                        } else if (this.disX > wd / 2) {
                            //具體滑動距離我取的是 手指偏移距離*5。
                            parentElement.dataset.type = 1;
                            this.deleteSlider = "transform:translateX(-" + this.disX + "px)";

                            // 最大也只能等於刪除按鈕寬度
                            if (this.disX*1.5 >= wd) {
                                parentElement.dataset.type = 1;
                                this.deleteSlider = "transform:translateX(-" + wd + "px)";

                            }
                        }
                    }
                }
            },
            touchEnd(ev){
                ev = ev || event;
                let parentElement = ev.currentTarget.parentElement;
                let wd = this.$refs.remove.offsetWidth;
                if (ev.changedTouches.length == 1) {

                    let endY = ev.changedTouches[0].clientY;
                    if (Math.abs(this.startY - endY) < 30) {
                        let endX = ev.changedTouches[0].clientX;
                        this.disX = this.startX - endX;
                        console.log("touchEndthis.disX:", this.disX)
                        //如果距離小於刪除按鈕一半,強行回到起點

                        if (this.disX < (wd /2 )) {
                            parentElement.dataset.type = 0;
                            this.deleteSlider = "transform:translateX(0px)";
                        } else {
                            //大於一半 滑動到最大值
                            parentElement.dataset.type = 1;
                            this.deleteSlider = "transform:translateX(-" + wd + "px)";
                        }
                        console.log("touchEnd:dataset", parentElement.dataset.type);
                    }
                }
            },
            restSlide(){
                let listItems = document.querySelectorAll('.slider-item');
                console.log(listItems);
                // 復位
                for (let i = 0; i < listItems.length; i++) {
                    listItems[i].firstChild.style = "transform:translateX(0" + "rem)";
                }
            },
            deleteItem: function (index) {
                this.$emit('deleteItem', index);
                this.deleteSlider = "transform:translateX(0" + "rem)";
            }
        }
    }
</script>
<style scoped lang="sass" type="text/scss">
    .slider-item {
        width: 100%;
        position: relative;
        user-select: none;
        .content {
            position: relative;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            z-index: 100;
            //    設定過渡動畫
            transition: 0.6s;

        }
        .remove {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            position: absolute;
            width: 1rem;
            height: 100%;
            background: #F5F5F5;
            right: 0;
            top: 0;
            color: #fff;
            text-align: center;
            font-size: .16rem;
            img {
                width: .28rem;
                height: .28rem;
            }
            span {
                display: block;
                margin-top: .08rem;
                color: #999;
                font-size: .14rem;

            }
        }
    }

</style>

2. 使用部分

<leftSlider :index="1" @deleteItem="deleteItem">
            <div style="height: 1.16rem;width: 100%;background: blue">
                    123123
            </div>
    </leftSlider>
<script>
 import leftSlider from "./common/leftSlider.vue"
   components: {
            leftSlider,
        },
</script>

參考網址

1. https://blog.csdn.net/zhaohaixin0418/article/details/71480300
2. https://segmentfault.com/a/1190000011062124
3. http://www.jb51.net/article/136221.htm