卡片左右滑动 带动任务条滑动 vue

接到一个任务，做一个活动卡片，卡片左右滑动带动卡片上方的任务条走到对应节点：
1、卡片和任务条均为动态生成
2、卡片底部可以左右滑动
3、当一张卡片超过50%的区域展示出来后放手，定位到对应卡片
4、卡片更换完成后，上方任务轴同时更换

这个任务的主要就在数据格式的制定与滑动的判断，不是很难、用vue写的

1.首先写出一个卡片的样式，得到其宽度，获取共有多少张卡片。所有卡片放在一个div里面，div的宽度为（卡片宽度+卡片间距）*卡片数量 width:${cardcount*97}%
2.滑动开始，获取起始位置startX
滑动时，使卡片跟着滑动，transform:translateX(${cardLeft}px)，滑动距离超过一个卡片的宽度时，滑动宽度为原宽度+卡片的宽度
3.滑动结束时，获取结束位置endX，得到滑动的距离disX = endX - startX，判断超过卡片的50%，则滑动一个卡片，否则不滑动。如果此时是第一个卡片还要右滑，或者是最后一个卡片还要左滑，则不滑动
4.滑动一个卡片，任务轴传一个变量，改变当前任务点
核心：

      cardLeft: 0, //现移动距离
      startX: 0, //起始位置
      endX: 0, //结束位置
      nowLeft: 0, //移动时距离
      disX: 0, //总移动距离
      cardWidth: 0,//卡片（移动）宽度

    touc