html使用原生vue（非脚手架）来实现左滑删除功能

      

        

          

            

              
            
            

              
{
    {item.bankName}}
              
储蓄卡
            
          
          
{
    {item.bankAccount}}
        
        

          
删除
        
      
    

.list-item {
    position: relative;
    margin: .15rem 0;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
  }
  .list-item[data-type='0'] {
    transform: translate3d(0,0,0);
  }
  .list-item[data-type="1"]{
    transform: translate3d(-1.4rem,0,0);
  }
  .flex {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .item-left {
    position: relative;
  }
  .item-img {
    display: block;
    width: 0.9rem;
    height: 0.9rem;
  }
  .img-icon {
    position: absolute;
    top: 0;
    left: 0;
    width: .28rem;
    height: .13rem;
    background: rgba(241, 64, 112, 1);
    border-radius: 0 0 .065rem 0;
    font-size: .12rem;
    text-align: center;
    line-height: .13rem;
  }
  .item-desc {
    width: 2.43rem;
    height: auto;
    margin-left: .12rem;
  }
  .item-text {
    display: -webkit-box ;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    -webkit-box-orient: vertical;
    -webkit-line-clamp:2;
  }
  .item-price {
    line-height: .4rem;
  }
  .now-price {
    color: #F14070;
    margin-right: .1rem;
  }
  .origin-price {
    text-decoration: line-through;
    color: #6C7B8A;
  }
  .btn-box {
    position: absolute;
    top: 0;
    right: -1.55rem;
  }
  .btn {
    display: inline-block;
    width: .7rem;
    height: .9rem;
    font-size: .17rem;
    text-align: center;
    line-height: .9rem;
  }
  .edit {
    background: #212138;
  }
 .del {
  background           : #E7BB84;
  // background-color  : #c00;
  width                : 1.2rem;
  display              : flex;
  flex-direction       : column;
  align-items          : center;
  justify-content      : center;
  color                : #fff;
  -webkit-transform    : translateX(0.45rem);
  transform            : translateX(0.45rem);
  -webkit-transition   : all 0.4s;
  transition           : all 0.4s;
  font-size            : 0.25rem;
  position             : absolute;
  right                : -0.75rem;
  height               : 1.3rem;
  text-align           : center;
}
  .add {
    width: 2.16rem;
    height: .9rem;
    padding: 1px;
    background: url(../../../images/live_goods/add.png) no-repeat;
    background-size: 100%;
  }
  .tips {
    width: 1.2rem;
    height: .33rem;
    margin: 1rem auto;
    font-size: .12rem;
    color: rgba(119, 128, 135, 1);
    line-height: .165rem;
  }

    export default {
      props: {
      },
      data () {
        return {
          startX: 0, // 初始位置
          endX: 0, // 结束位置
        };
      },
      created () {},
      mounted () {},
      methods: {
        // 点击详情
        toDetail () {
          if (this.checkSlide()) {
            this.restSlide();
          } else {
            this.$router.push({
              path: "/activity/live/goods_info"
            });
          }
        },
        // 触摸开始
        touchStart (e) {
          // 记录初始位置
          this.startX = e.touches[0].clientX;
        },
        // 触摸结束
        touchEnd(e) {
          // 当前滑动的父级元素
          let parentElement = e.currentTarget.parentElement;
          // 记录结束位置
          this.endX = e.changedTouches[0].clientX;
          // console.log('结束' + parentElement.dataset.type + '====' + (this.startX - this.endX));
 
          // 左滑
          if ( parentElement.dataset.type == 0 && this.startX - this.endX > 30) {
            this.restSlide();
            parentElement.dataset.type = 1;
          }
 
          // 右滑
          if ( parentElement.dataset.type == 1 && this.startX - this.endX < - 30 ) {
            this.restSlide();
            parentElement.dataset.type = 0;
          }
 
          this.startX = 0;
          this.endX = 0;
        },
        // 判断当前是否有滑块处于滑动状态
        checkSlide() {
          let listItems = document.querySelectorAll('.list-item');
 
          for (let i = 0 ; i < listItems.length ; i++) {
            if (listItems[i].dataset.type == 1) {
              return true;
            }
          }
          return false;
        },
        restSlide() {
          let listItems = document.querySelectorAll('.list-item');
          // 复位
          for ( let i = 0 ; i < listItems.length ; i++) {
            listItems[i].dataset.type = 0;
          }
        }
      },
      components: {}
    };