應該是向左滑動某個元素出現(xiàn)刪除的div 現(xiàn)在是只要向左滑動 整個列表都會出現(xiàn)

  <div class="order-list" :selectFoods="selectFoods">
        <ul>
          <transition-group name="slide-fade">       
            <li v-for = '(food,index) in selectFoods' class="cartList slide-warp" :key="food.name" ref="slideWarp">
              <div style="float: left;" class="slide-item" :data-index="index">{{food.name}}</div>
              <div class="cartControl">
                <span @click = "addFood(food)" class="addFood">+</span>
                <b>{{food.count}}</b>
                <span @click = 'decreaseFood(food)' class="decreaseFood">-</span>
                <span>價格：￥{{food.count * food.price}}</span>
              </div>
              <div class="slide-del">刪除</div>
            </li>

          </transition-group>
        </ul>
      </div>

methods:{
  _initSlideDelete() {
      let initX; // 觸摸位置
      let moveX; // 滑動時的位置
      let X = 0; // 移動距離
      let objX = 0; // 目標對象位置
      window.addEventListener('touchstart', function(event) {
        let obj = event.target.parentNode;
        if (obj.className === 'slide-warp') {
          initX = event.targetTouches[0].pageX;
          objX =
          obj.style.WebkitTransform
          .replace(/translateX\(/g, '')
          .replace(/px\)/g, '') * 1;
        }
        if (objX === 0) {
          window.addEventListener('touchmove', function(event) {
            let obj = event.target.parentNode;
            if (obj.className === 'slide-warp') {
              moveX = event.targetTouches[0].pageX;
              X = moveX - initX;
              if (X >= 0) {
                obj.style.WebkitTransform = 'translateX(' + 0 + 'px)';
              } else if (X < 0) {
                let l = Math.abs(X);
                obj.style.WebkitTransform = 'translateX(' + -l + 'px)';
                if (l > 80) {
                  l = 80;
                  obj.style.WebkitTransform = 'translateX(' + -l + 'px)';
                }
              }
            }
          });
        } else if (objX < 0) {
          window.addEventListener('touchmove', function(event) {
            let obj = event.target.parentNode;
            if (obj.className === 'slide-warp') {
              moveX = event.targetTouches[0].pageX;
              X = moveX - initX;
              if (X >= 0) {
                let r = -80 + Math.abs(X);
                obj.style.WebkitTransform = 'translateX(' + r + 'px)';
                if (r > 0) {
                  r = 0;
                  obj.style.WebkitTransform = 'translateX(' + r + 'px)';
                }
              } else {
                // 向左滑動
                obj.style.WebkitTransform = 'translateX(' + -80 + 'px)';
              }
            }
          });
        }
      });
      window.addEventListener('touchend', function(event) {
        let obj = event.target.parentNode;
        if (obj.className === 'slide-warp') {
          objX =
          obj.style.WebkitTransform
          .replace(/translateX\(/g, '')
          .replace(/px\)/g, '') * 1;
          if (objX > -40) {
            obj.style.WebkitTransform = 'translateX(' + 0 + 'px)';
            objX = 0;
          } else {
            obj.style.WebkitTransform = 'translateX(' + -80 + 'px)';
            objX = -80;
          }
        }
      });
    },

請輸入代碼