vue + vue-touch 來實現移動端左右導航效果（有點像京東移動站導航）
使用技術：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 後引入
我這裏Lib,是我的一個方法 你也可以 直接Vue.use()引用
{name:'v-touch'}的作用 聲明一個以vue-touch的標籤
然後 在html內寫一個 <vue-touch></vue-touch>就可以，當然後面我們要寫入方法;
附:vue-touch方法
因爲vue-touch其實封裝了 hammer.js的方法 其實我們這裏介紹的也就是他幾個事件；詳情可以搜索 hammer.js的文檔;
hammer.js主要針對觸屏的6大事件進行監聽。如下圖所示：
1、 Pan事件：在指定的dom區域內，一個手指放下並移動事件，即觸屏中的拖動事件。這個事件在屏觸開發中比較常用，如：左拖動、右拖動等，如手要上使用QQ時向右滑動出現功能菜單的效果。該事件還可以分別對以下事件進行監聽並處理：
Panstart：拖動開始、Panmove：拖動過程、Panend：拖動結束、Pancancel：拖動取消、Panleft：向左拖動、Panright：向右拖動、Panup：向上拖動、Pandown：向下拖動
2、 Pinch事件：在指定的dom區域內，兩個手指（默認爲兩個手指，多指觸控需要單獨設置）或多個手指相對（越來越近）移動或相向（越來越遠）移動時事件。該事件事以分別對以下事件進行監聽並處理：
Pinchstart：多點觸控開始、Pinchmove：多點觸控過程、Pinchend：多點觸控結束、Pinchcancel：多點觸控取消、Pinchin：多點觸控時兩手指距離越來越近、Pinchout：多點觸控時兩手指距離越來越遠
3、 Press事件：在指定的dom區域內觸屏版本的點擊事件，這個事件相當於PC端的Click事件，該不能包含任何的移動，最小按壓時間爲500毫秒，常用於我們在手機上用的“複製、粘貼”等功能。該事件分別對以下事件進行監聽並處理：
Pressup：點擊事件離開時觸發
4、 Rotate事件：在指定的dom區域內，當兩個手指或更多手指成圓型旋轉時觸發（就像兩個手指擰螺絲一樣）。該事件分別對以下事件進行監聽並處理：
Rotatestart：旋轉開始、Rotatemove：旋轉過程、Rotateend：旋轉結束、Rotatecancel：旋轉取消
5、 Swipe事件：在指定的dom區域內，一個手指快速的在觸屏上滑動。即我們平時用到最多的滑動事件。
Swipeleft：向左滑動、Swiperight：向右滑動、Swipeup：向上滑動、Swipedown：向下滑動
6、Tap事件：在指定的dom區域內，一個手指輕拍或點擊時觸發該事件(類似PC端的click)。該事件最大點擊時間爲250毫秒，如果超過250毫秒則按Press事件進行處理。
(以上作者毫無節奏的摘抄一下，其實我也是費好大勁搜索的呀)
這裏注意swipe這個方法；我們不需要因爲這個滑動和我們需要的滑動是不一樣的；
Panstart 是我們需要的；展示一下 div 代碼層；
<v-touch class="ul"
v-on:pandown="onPanStart" //向下滑動
v-on:panmove="onPanmove" //滑動結束
v-on:panup="onPandup"> //向上滑動
</v-touch>
注意：也可以進行 事件的限制 用戶多長時間可以執行
//我沒用到這句
v-bind:pan-options="{ direction: 'panup', threshold: 100 }">首先定一個 公共變量
//省去一些 代碼
var lefthe = 0; //檢測滑動的位置
onPanStart:function(data)
{
this.positionjson.transition=''
console.log(data)
var y = data.deltaY; //事件執行 所滑動的距離
lefthe = y + this.lefthe; //滑動的距離 記錄到 lefthe 方便下次執行
console.log(lefthe)
if(lefthe >=50)
{
//限制 不能一直往上拉 拉到宇宙呢？我這裏是寫死的
lefthe = 0;
//回彈效果 在 滑動結束後 執行
return
}else{
}
this.positionjson.top = lefthe +'px';
},滑動結束 事件
onPanend:function(data)
{
if(lefthe ==0)
{
console.log('現在是0')
this.positionjson.top = lefthe +'px';
//滑動結束 執行 一些事件 lefthe 0 的時候其實也就是下拉到頂的過程
this.positionjson.transition='0.2s ease 0s'
}else{
}
this.lefthe = lefthe;
},//上拉代碼塊
onPandup:function(data)
{
var domul =document.getElementById('domul');
this.positionjson.transition=''
var y = data.deltaY; //下拉的距離
var boxheight = this.boxheight; //視圖高度 也就是分辨率
var liheight = document.getElementById('libox').clientHeight; //左側每個li的高度
console.log(liheight+'元素的高')
var zongheight = this.navapi.list.length * 70; //就能得出li父盒子高度
var bottomheight = -(zongheight - boxheight) + -100; //計算下拉到 滑動盒子的高度 - 視圖高度 =上拉到底的位置
if(lefthe <= bottomheight)
{
// console.log('到底啦啦啦啦啦')
return;
}else{}
lefthe = y + this.lefthe;
this.positionjson.top = lefthe +'px';
},