如何用Vue实现手机端滑动切换效果的功能？

本文共计1179个文字，预计阅读时间需要5分钟。

原文示例：本文实例为大家分享了vue实现滑动时红黄块左右滑动相对距离，效果如下+实现过程主要在于实时跟踪手指滑动位置与原位置之间的偏移量，再相对于原位置移动红黄块。

简化后内容：本文介绍了如何用vue实现滑动红黄块，效果如右图所示。关键在于实时计算手指滑动偏移，以此移动红黄块。

本文实例为大家分享了vue实现滑动时红黄色块左右滑动相应距离，效果如下图

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

红黄块布局如下

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