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這個方法;我們不需要因為這個滑動和我們需要的滑動是不一樣的;
這裡注意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';
},
留言
張貼留言