vue实现滑动切换效果（仅在手机模式下可用）

实现滑动时红黄色块左右滑动相应距离，效果如下图

实现过程主要在于实时跟踪手指滑动位置与原位置之间的偏移量，再相应移动红黄块。

• 红黄块布局如下

 back中包含back-l,back-r左右两块，正常情况下为了隐藏其中一块，子模块需要设置display: inline-block，并且宽度都需要设置width: 100%。父模块中设置white-space: nowrap用于处理两个子模块之间的空白。

 <template lang="html">
  <div class="back"
  @touchstart.prevent="touchStart"
  @touchmove.prevent="touchMove"
  @touchend="touchEnd" ref="back">
    <div class="back-l" ref="left"></div>
    <div class="back-r" ref="right"></div>
  </div>
</template>

<style scoped lang="stylus" rel="stylesheet/stylus">
.back
  position: fixed
  width: 100%
  height: 100px
  white-space: nowrap
  .back-l
    position: relative
    vertical-align: top
    display: inline-block
    width: 100%
    height: 100%
    background-color: red
  .back-r
    display: inline-block
    vertical-align: top
    position: relative
    width: 100%
    height: 100%