先給大家展示下效果圖，感覺(jué)還不錯(cuò)請(qǐng)參考實(shí)現(xiàn)代碼：

使用技術(shù)：vue2.0 webpack vue-touch 一些簡(jiǎn)單的javascript;

（注意:vue-touch 使用的是2.0.0版本 需要與vue2.0.0兼容）

vue-touch(地址:https://github.com/vuejs/vue-touch 注意是next 分支)

左側(cè)導(dǎo)航可滑動(dòng)（右側(cè)視圖窗因?yàn)楹妥筮壿嬕粯?就沒(méi)寫）

var VueTouch = require('vue-touch')
Lib.Vue.use(VueTouch, {name: 'v-touch'})

通過(guò)npm 安裝后vuetouch 后引入

我這里L(fēng)ib,是我的一個(gè)方法 你也可以 直接Vue.use()引用

{name:'v-touch'}的作用 聲明一個(gè)以vue-touch的標(biāo)簽

然后 在html內(nèi)寫一個(gè) <vue-touch></vue-touch>就可以，當(dāng)然后面我們要寫入方法;

附:vue-touch方法

因?yàn)関ue-touch其實(shí)封裝了 hammer.js的方法 其實(shí)我們這里介紹的也就是他幾個(gè)事件；詳情可以搜索 hammer.js的文檔;

hammer.js主要針對(duì)觸屏的6大事件進(jìn)行監(jiān)聽。如下圖所示：

1、  Pan事件：在指定的dom區(qū)域內(nèi)，一個(gè)手指放下并移動(dòng)事件，即觸屏中的拖動(dòng)事件。這個(gè)事件在屏觸開發(fā)中比較常用，如：左拖動(dòng)、右拖動(dòng)等，如手要上使用QQ時(shí)向右滑動(dòng)出現(xiàn)功能菜單的效果。該事件還可以分別對(duì)以下事件進(jìn)行監(jiān)聽并處理：

Panstart：拖動(dòng)開始、Panmove：拖動(dòng)過(guò)程、Panend：拖動(dòng)結(jié)束、Pancancel：拖動(dòng)取消、Panleft：向左拖動(dòng)、Panright：向右拖動(dòng)、Panup：向上拖動(dòng)、Pandown：向下拖動(dòng)

2、  Pinch事件：在指定的dom區(qū)域內(nèi)，兩個(gè)手指（默認(rèn)為兩個(gè)手指，多指觸控需要單獨(dú)設(shè)置）或多個(gè)手指相對(duì)（越來(lái)越近）移動(dòng)或相向（越來(lái)越遠(yuǎn)）移動(dòng)時(shí)事件。該事件事以分別對(duì)以下事件進(jìn)行監(jiān)聽并處理：

Pinchstart：多點(diǎn)觸控開始、Pinchmove：多點(diǎn)觸控過(guò)程、Pinchend：多點(diǎn)觸控結(jié)束、Pinchcancel：多點(diǎn)觸控取消、Pinchin：多點(diǎn)觸控時(shí)兩手指距離越來(lái)越近、Pinchout：多點(diǎn)觸控時(shí)兩手指距離越來(lái)越遠(yuǎn)

3、  Press事件：在指定的dom區(qū)域內(nèi)觸屏版本的點(diǎn)擊事件，這個(gè)事件相當(dāng)于PC端的Click事件，該不能包含任何的移動(dòng)，最小按壓時(shí)間為500毫秒，常用于我們?cè)谑謾C(jī)上用的“復(fù)制、粘貼”等功能。該事件分別對(duì)以下事件進(jìn)行監(jiān)聽并處理：

Pressup：點(diǎn)擊事件離開時(shí)觸發(fā)

4、  Rotate事件：在指定的dom區(qū)域內(nèi)，當(dāng)兩個(gè)手指或更多手指成圓型旋轉(zhuǎn)時(shí)觸發(fā)（就像兩個(gè)手指擰螺絲一樣）。該事件分別對(duì)以下事件進(jìn)行監(jiān)聽并處理：

Rotatestart：旋轉(zhuǎn)開始、Rotatemove：旋轉(zhuǎn)過(guò)程、Rotateend：旋轉(zhuǎn)結(jié)束、Rotatecancel：旋轉(zhuǎn)取消

5、  Swipe事件：在指定的dom區(qū)域內(nèi)，一個(gè)手指快速的在觸屏上滑動(dòng)。即我們平時(shí)用到最多的滑動(dòng)事件。

Swipeleft：向左滑動(dòng)、Swiperight：向右滑動(dòng)、Swipeup：向上滑動(dòng)、Swipedown：向下滑動(dòng)

6、Tap事件：在指定的dom區(qū)域內(nèi)，一個(gè)手指輕拍或點(diǎn)擊時(shí)觸發(fā)該事件(類似PC端的click)。該事件最大點(diǎn)擊時(shí)間為250毫秒，如果超過(guò)250毫秒則按Press事件進(jìn)行處理。

(以上作者毫無(wú)節(jié)奏的摘抄一下，其實(shí)我也是費(fèi)好大勁搜索的呀)
這里注意swipe這個(gè)方法；我們不需要因?yàn)檫@個(gè)滑動(dòng)和我們需要的滑動(dòng)是不一樣的；

Panstart 是我們需要的；

展示一下 div 代碼層；

<v-touch class="ul" 
 v-on:pandown="onPanStart" //向下滑動(dòng)
 v-on:panmove="onPanmove" //滑動(dòng)結(jié)束
 v-on:panup="onPandup"> //向上滑動(dòng)
</v-touch>

注意：也可以進(jìn)行 事件的限制 用戶多長(zhǎng)時(shí)間可以執(zhí)行

//我沒(méi)用到這句
 v-bind:pan-options="{ direction: 'panup', threshold: 100 }">

首先定一個(gè) 公共變量

//省去一些 代碼
var lefthe = 0; //檢測(cè)滑動(dòng)的位置
onPanStart:function(data)
 {
 this.positionjson.transition=''
 console.log(data)
 var y = data.deltaY; //事件執(zhí)行 所滑動(dòng)的距離
 lefthe = y + this.lefthe; //滑動(dòng)的距離 記錄到 lefthe 方便下次執(zhí)行
 console.log(lefthe)
 if(lefthe >=50)
 {
 //限制 不能一直往上拉 拉到宇宙呢？我這里是寫死的
  lefthe = 0;
 //回彈效果 在 滑動(dòng)結(jié)束后 執(zhí)行
 return
 }else{
 }
 this.positionjson.top = lefthe +'px';
 },

滑動(dòng)結(jié)束 事件

 onPanend:function(data)
 {
 if(lefthe ==0)
 {
 console.log('現(xiàn)在是0')
 this.positionjson.top = lefthe +'px';
 //滑動(dòng)結(jié)束 執(zhí)行 一些事件 lefthe 0 的時(shí)候其實(shí)也就是下拉到頂?shù)倪^(guò)程
 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; //左側(cè)每個(gè)li的高度
 console.log(liheight+'元素的高')
 var zongheight = this.navapi.list.length * 70; //就能得出li父盒子高度
 var bottomheight = -(zongheight - boxheight) + -100; //計(jì)算下拉到 滑動(dòng)盒子的高度 - 視圖高度 =上拉到底的位置
 if(lefthe <= bottomheight)
 {
 // console.log('到底啦啦啦啦啦')
 return;
 }else{}
 lefthe = y + this.lefthe;
 this.positionjson.top = lefthe +'px';
 },

以上所述是小編給大家介紹的vue 和vue-touch 實(shí)現(xiàn)移動(dòng)端左右導(dǎo)航效果（仿京東移動(dòng)站導(dǎo)航），希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

最新評(píng)論