update

src/packages/leftslip/__test__/leftslip.spec.js

@@ -1,16 +0,0 @@
-import {shallowMount} from '@vue/test-utils';
-import LeftSlip from '../leftslip.vue';
-import Vue from 'vue';
-
-describe('LeftSlip.vue', () => {
-    const wrapper = shallowMount(LeftSlip, {});
-    it('设置单一删除键', () => {
-        wrapper.setProps({
-            onlyDelBtn: true
-        });
-
-        return Vue.nextTick().then(function() {
-            expect(wrapper.find('.nut-delet-btn').isVisible()).toBe(true);
-        });
-    });
-});

src/packages/leftslip/leftslip.vue

@@ -18,19 +18,10 @@
     export default {
         name: 'nut-leftslip',
         props: {
-
-            isMainSlide: {
-                type: Boolean,
-                default: true
-            },
             isClickBack: {
                 type: Boolean,
                 default: true
             },
-            // rightWidth: {
-            //     type: [Number, String],
-            //     default: 30
-            // }
         },
         data() {
             return {
@@ -45,27 +36,42 @@
                 startLeft: 0,
                 startRightW: 0,
                 isOpen: false,
+                scrollTop: 0,
+                oldScrollTop: 0,
+                lock: false
             };
         },
+        watch: {
+            // scrollTop(newValue, oldValue) {
+            //     setTimeout(() => {
+            //         if (newValue == window.scrollY) { //延时执行后当newValue等于window.scrollY，代表滚动结束
+            //             console.log('滚动结束');
+            //             this.oldScrollTop = newValue; //每次滚动结束后都要给oldScrollTop赋值
+            //             this.lock = false
+            //         };
+            //     }, 20); //必须使用延时器，否则每次newValue和window.scrollY都相等，无法判断，20ms刚好大于watch的侦听周期，故延时20ms
+            //     if (this.oldScrollTop == oldValue) { //每次滚动开始时oldScrollTop与oldValue相等
+            //         console.log('滚动开始');
+            //         this.lock = true;
+            //     }
+            // }
+        },
         mounted() {
             this.$nextTick(() => {
-                if (this.onlyDelBtn) {
-                    return;
-                }
+
                 for (var slot of this.$slots.slipbtns) {
                     this.buttonWidth = this.buttonWidth + slot.elm.offsetWidth;
                 }
             });
-            this.pageWidth = document.documentElement.clientWidth
-            this.sliderEle = this.isMainSlide ? this.$refs.slipItem : this.$refs.right
-
-            document.addEventListener('touchstart', this.touchStart, false);
-            // window.addEventListener('scroll', this.handleRestet, true);
+            this.pageWidth = document.documentElement.clientWidth;
+            this.sliderEle = this.$refs.slipItem;
+            // this.handleScroll();
+            // document.addEventListener('touchstart', this.touchStart, false);
 
         },
         beforeDestroy() {
             // 移除监听
-            window.removeEventListener('touchstart', this.touchStart, true);
+            window.removeEventListener('scroll', this.handleScroll());
         },
         methods: {
             handleRestet() {
@@ -74,16 +80,18 @@
                     this.restSlide();
                 }
             },
-            onlyDelClick() {
-                //一键删除模式点击删除
-                this.$emit('oneDelete', this.$refs.slipItem);
-                this.restSlide();
+            handleScroll() {
+                window.addEventListener('scroll', () => {
+                    this.scrollTop = window.scrollY;
+
+                })
             },
             touchStart(e) {
                 let parentElement = e.currentTarget.parentElement;
-                var slip = document.getElementsByClassName('leftslip-open');
+                let slip = []
+                slip = document.getElementsByClassName('leftslip-open');
                 if (slip) {
-                    // if (parentElement.dataset.type == 1) return
+                    if (parentElement.dataset.type == 1) return
                     this.restSlide();
                 }
                 if (e.touches.length == 1) {
@@ -93,7 +101,6 @@
                 const transform = this.sliderEle.style.transform
                 this.startLeft = Number(transform ? transform.split('(')[1].split('px')[0] : 0)
                 this.startRightW = this.startLeft < 0 ? Number(this.$refs.right.style.width.split('px')[0]) : 0;
-                // console.log('startoleft2', this.sliderEle.style.transform, this.startLeft, this.startRightW)
             },
 
             touchMove(e) {
@@ -101,45 +108,50 @@
                 let parentElement = e.currentTarget.parentElement;
 
                 let disX = e.touches[0].pageX - this.startX // >0 右滑，<0 左滑
+                let disY = e.touches[0].pageY - this.startY
+
                 if (e.touches.length == 1) {
-                    if (disX > 0 || (disX > 0 && this.startLeft >= 0) || (disX < 0 && disX > this.buttonWidth / 2)) {  //禁止右滑
-                        return false
-                    } else {
-                        this.doSlide((-this.buttonWidth), true) // 最大滑动距离为右侧宽度
+                    if (Math.abs(disY) < 15) {
+                        // console.log(disX, disY)
+                        if (disX > 0 || (disX > 0 && this.startLeft >= 0)) {  //禁止右滑
+                            return false
+                        } else {
+                            this.doSlide((-this.buttonWidth), true) // 最大滑动距离为右侧宽度
+                        }
                     }
+
                 }
             },
             touchEnd(e) {
-                // console.log('end')
                 let parentElement = e.currentTarget.parentElement;
                 const disX = e.changedTouches[0].pageX - this.startX // >0 右滑，<0 左滑
                 let distance
+                // console.log(1, disX, this.isClickBack)
                 if (!this.isClickBack && disX === 0) { // 点击时不收起右侧
+                    // console.log(2, disX, this.isClickBack)
                     return false
+                } else {
+                    if ((-disX) > 50) { // 向左滑动超过阙值时,右侧滑出固定距离
+                        distance = this.buttonWidth > this.pageWidth ? this.pageWidth * 0.8 : this.buttonWidth;
+                        parentElement.className = 'nut-leftslip-item leftslip-open'
+                        parentElement.dataset.type = 1;
+                    } else { // 向左滑动未超过阙值，或向右滑动时，回原位
+                        distance = 0
+                        parentElement.className = 'nut-leftslip-item'
+                        parentElement.dataset.type = 0;
+                    }
+                    // console.log(3, disX, this.isClickBack)
+                    this.doSlide(-distance, true)
                 }
-                if ((-disX) > 50) { // 向左滑动超过阙值时,右侧滑出固定距离
-                    distance = this.buttonWidth > this.pageWidth ? this.pageWidth * 0.8 : this.buttonWidth;
-                    parentElement.className = 'nut-leftslip-item leftslip-open'
-                    parentElement.dataset.type = 1;
-                } else { // 向左滑动未超过阙值，或向右滑动时，回原位
-                    distance = 0
-                    parentElement.className = 'nut-leftslip-item'
-                    parentElement.dataset.type = 0;
-                }
-                this.doSlide(-distance, true)
 
-                // console.log('touchEnd', distance);
             },
 
             doSlide(distance, animate = false) {
                 this.sliderEle.style.transform = `translateX(${distance}px)`
                 this.$refs.right.style.width = -distance + 'px'
-                if (this.isMainSlide) {
-                    this.sliderEle.style.transition = animate ? 'transform .5s' : 'initial'
-                    this.$refs.right.style.transition = animate ? 'width .5s' : 'initial'
-                } else {
-                    this.sliderEle.style.transition = animate ? 'transform .5s, width .5s' : 'initial'
-                }
+                this.sliderEle.style.transition = animate ? 'transform .5s' : 'initial'
+                this.$refs.right.style.transition = animate ? 'width .5s' : 'initial'
+
             },
 
             restSlide() {
@@ -147,8 +159,9 @@
 
                 // 复位
                 for (let i = 0; i < listItems.length; i++) {
-                    listItems[i].style = 'transform:translateX(0' + 'px)';
+                    listItems[i].style = 'transform:translateX(0px)';
                     listItems[i].dataset.type = 0; //是否展开标志位默认0，左滑展开为1，右滑隐藏为0
+                    listItems[i].className = 'nut-leftslip-item'
                     this.isOpen = false;
                 }