先给大家展示下效果图，感觉还不错请参考实现代码：
使用技术：vue2.0 webpack vue-touch 一些简单的javascript;
（注意:vue-touch 使用的是2.0.0版本 需要与vue2.0.0兼容）
vue-touch(地址:https://github.com/vuejs/vue-touch 注意是next 分支)
左侧导航可滑动（右侧视图窗因为和左逻辑一样 就没写）
var VueTouch = require('vue-touch')
Lib.Vue.use(VueTouch, {name: 'v-touch'})
通过npm 安装后vuetouch
在本文中，我们将探讨如何使用Vue.js和vue-touch库来实现移动端的左右导航效果，类似于京东移动站的导航。Vue.js是一个流行的JavaScript框架，适用于构建用户界面，而vue-touch则是Vue.js的一个插件，它提供了触摸事件的抽象，使得在移动端开发中处理手势变得简单。
为了实现这个功能，你需要确保你已经安装了Vue 2.0.0和vue-touch 2.0.0版本，这两个版本是相互兼容的。vue-touch可以在GitHub的next分支上找到（https://github.com/vuejs/vue-touch）。你可以通过npm来安装vue-touch：
```bash
npm install vue-touch --save
```
安装完成后，你需要在你的Vue实例中使用VueTouch。在示例代码中，使用了`Lib.Vue.use(VueTouch, {name: 'v-touch'})`来全局注册vue-touch，`{name: 'v-touch'}`是为了自定义指令名。如果你不希望全局注册，也可以在单个组件中使用`Vue.use()`。
在HTML模板中，你需要添加一个`<vue-touch>`标签，这样vue-touch就能识别并处理触摸事件。但在这个例子中，我们只展示了如何处理左侧导航的滑动事件，右侧视图窗的处理逻辑与左侧相同，因此没有展示。
关键在于利用vue-touch提供的手势事件，如Panstart、Panmove和Panend。Pan事件用于处理滑动手势，非常适合创建导航栏。例如，下面的代码片段展示了如何监听滑动手势：
```html
<v-touch class="ul" v-on:pandown="onPanStart" v-on:panmove="onPanmove" v-on:panup="onPandown">
<!-- 导航内容 -->
</v-touch>
```
这里定义了三个方法：`onPanStart`, `onPanmove`, 和 `onPandown`，分别对应于滑动开始、滑动过程和滑动结束。在这些方法中，你可以计算滑动的距离，并根据需求更新导航的状态。
例如，`onPanStart`可以记录滑动的初始位置，`onPanmove`可以持续更新滑动的位置，而`onPandown`可以处理滑动结束时的动作，比如切换导航项或者改变导航栏的显示状态。
在实际应用中，你可能还需要处理一些边界情况，例如限制滑动的速度、方向和阈值，以及防止短时间内重复触发滑动事件。这些可以通过设置vue-touch的选项来实现，例如`pan-options="{ direction: 'panup', threshold: 100 }"`。
通过结合Vue.js的响应式特性以及vue-touch提供的手势事件，我们可以轻松地创建出具有交互性的移动端导航栏。记住，为了达到最佳效果，你应该根据项目的需求和用户的习惯来调整和优化手势的配置。同时，熟悉hammer.js的手势事件，如Pinch、Press、Rotate和Swipe，也会对提升用户体验有所帮助，因为它们能够处理更复杂的手势交互。
