求vue.js实现列表左滑删除其中一项目

Question

1. 左滑动时只能手指接触都一项滑动
2. 非es6 template模式实现，用new vue();
   

Answer 1

将txtStyle改成数组，根据下标改变其中一项

Answer 2

滑动与es6没有关系，请参考vue-touch里的

<div v-touch:swipeleft="onSwipeLeft">Swipe me!</div>

Answer 3

看看这个

Answer 4

<div class="move" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd" :style="txtStyle">

你的txtStyle是共享的，改成单例的即可

Answer 5

代码如下：
<div class="list-item-wrapper" v-for="(item,index) in bankCardList">

<div class="left-delete">
  <div class="move" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd" :style="txtStyle">
    <div class="list-item" @click="selectBankCard(index)">
      <label class="label">
        <h4>{{item.bankName}}</h4>
        <p>储蓄卡</p>
      </label>
      <div>
        <div>**** **** ****</div>
        <div class="bankAccountTail">{{item.bankAccountTail}}</div>
      </div>
    </div>
  </div>
  <div class="btn-delete" :style="zIndex" @click.prevent="deleteItem(item.carId)">删除</div>
</div>

</div>

var app = new Vue({
el: '.container',
data: {

index: 0,
startX: 0, //触摸位置
moveX: 0,  //滑动时的位置
disX: 0,   //移动距离
txtStyle: '',
delWidth: 64,
top: '',
zIndex: 'z-index:-1',
bankCardList: [],
showError: false,
errorContent: '',
bankCardIndex: null,

},
methods: {

touchStart: function (ev) {
  ev = ev || event;
  if (ev.touches.length == 1) {
    // 手指按下的时候记录按下的位置
    this.startX = ev.touches[0].clientX;
  }
},
touchMove: function (ev) {
  ev = ev || event;
  if (ev.touches.length == 1) {
    // 滑动过程中的实时位置
    this.moveX = ev.touches[0].clientX;
    // 滑动过程中实时计算滑动距离
    this.disX = this.startX - this.moveX;
    // console.log('disX==>',this.disX)
    // 如果是向右滑动或者只是点击，不改变滑动位置
    if (this.disX < 0 || this.disX == 0) {
      this.txtStyle = "transform:translateX(0)";
    } else if (this.disX > 0) {
      // 如果是向左滑动，则实时给这个根元素一个向左的偏移-left，当偏移量到达固定值delWidth时，固定元素的偏移量为 delWidth
      if (this.disX >= this.delWidth/2) {
        this.txtStyle = "transform:translateX(-" + this.delWidth + "px)";
        this.zIndex = "z-index:" + 10 + "px";
      }
    }
  }
},
touchEnd: function (ev) {
  ev = ev || event;
  if (ev.changedTouches.length == 1) {
    this.startX = 0;
    this.zIndex = "z-index:" + -1 + "px";
    // 手指移动结束后的水平位置
    var endX = ev.changedTouches[0].clientX;
    // 触摸开始与结束,手指移动的距离
    this.disX = this.startX - endX;
    //如果距离小于删除按钮的1/2，不显示删除按钮
    if (this.moveX < this.delWidth/2) {
      this.txtStyle = "transform:translateX(0)";
    }
  }
},
deleteItem: function (cardId) {
  var self = this;
  var params = {
    cardId: cardId
  };
  var url = '/ht/{version}/capital/bank_card/del';
  window.request(url, 'post', params, {
    success: function () {
      self.getBankCardList();
    },
    error: function (data) {
      self.showErr(data.header.message);
    }
  })
},
showErr: function (err) {
  this.errorContent = err;
  this.showError = true;
},
hideErr: function () {
  this.errorContent = '';
  this.showError = false;
},
goWithdraw: function () {
  if(this.bankCardIndex != null){
    location.href = './withdraw.html?index='+this.bankCardIndex;
  }else{
    location.href = './withdraw.html';
  }
},
goAddBankCard: function () {
  location.href = './add_bankcard.html';
},
getBankCardList: function () {
  var self = this;
  var url = '/ht/{version}/capital/bank_card/list';
  window.request(url, 'get', null, {
    success: function (data) {
      self.bankCardList = data.body;
    },
    error: function (data) {
      self.showErr(data.header.message);
    }
  })
},
selectBankCard: function (index) {
  this.bankCardIndex = index;
  this.goWithdraw();
}

},
mounted: function () {

this.getBankCardList();

}
});

应该是 class="move"的div 上面的双向绑定不对。不应该放在v-for里面，不知道:style怎么才能只绑定滑动的一项？？求大神们解答！！！

Answer 6

你这个问题上次是怎么解决的,能说下嘛