vue下写的滑动删除

Question

swipeIt:function(){        //滑动删除
                setTimeout(() => {
                  // 判断是否存在信息列表
                  if (this.$refs.child) {
                    this.$refs.child.forEach((element, index) => {
                      let x, y, X, Y, swipeX, swipeY
                      // 监听touchstart
                      element.addEventListener('touchstart', e => {
                          e.preventDefault
                        x = e.changedTouches[0].pageX    //changedTouches触摸点的列表;
                        y = event.changedTouches[0].pageY
                        swipeX = true
                        swipeY = true
                        return this.isSwipe
                      })
                      element.addEventListener('touchmove', e => {
                        X = e.changedTouches[0].pageX
                        Y = e.changedTouches[0].pageY
                        if (swipeX && Math.abs(X - x) - Math.abs(Y - y) > 0){
                          // 阻止默认事件
                          e.stopPropagation()
                          // 右滑
                          if (X - x > 10) {
                            e.preventDefault()
                            this.isSwipe.splice(index, 1, false)
                          }
                          if (x - X > 10) {
                            e.preventDefault();
                            this.isSwipe.splice(index, 1, true)    //当列表有几条数据的时候，滑动第二条或者第三条前面的几条会跟着滑动
                            console.log(this.isSwipe)
                          }
                          swipeY = false
                        }
                        if (swipeY && Math.abs(X - x) - Math.abs(Y - y) < 0) {
                          swipeX = false
                        }
                      })
                    })
                  }
                }, 1000)
            }

当列表有几条数据的时候，滑动第二条或者第三条前面的几条会跟着滑动

Answer 1

已经有现成的轮子了
详情见：https://vux.li/#/zh-CN/compon...