bootstrap實現 手機端滑動效果,滑動到下一頁,jgestures.js插件


bootstrap能否實現 手機端滑動效果,滑動到下一頁

jgestures.js插件可以解決,只需要引入一個JS文件
<script src="js/jgestures.min.js"></script>
下面是JS代碼:
$(document).ready(function(){
//手勢右滑
$('#myCarousel').bind('swiperight swiperightup swiperightdown',function(){
// 執行一些動作...
})
//手勢左滑
$('#myCarousel').bind('swipeleft swipeleftup swipeleftdown',function(){
// 執行一些動作...
})
//單點滑動手勢,滑動完成后觸發(一個手指在屏幕上移動)
$('#myCarousel').bind('swipeone',function(){
// 執行一些動作...
})
});

=====================================
jGestures插件允許你如同原生的jQuery事件一樣監聽以下事件:'pinch'(縮放手勢), 'rotate'(旋轉手勢), 'swipe'(滑動手勢), 'tap'(輕觸) 以及 'orientationchange'(改變設備方向)。當然,部分事件在PC瀏覽器上可以通過轉換實現。比如 "tapone" 事件可以被 "clicking"事件觸發,鼠標手勢也可以產生"swipe"事件。

---------------------------------
基本的用法是:
jQuery('#swipe').bind('swipeone',eventHandler);

其中前半部分是確定需要綁定到的元素,后半部分中,swipeone是它支持的一些手勢,eventHandler是要發生的事件。

支持的事件有:
Orientationchange
設備的方向變化
(Pinch)兩指的縮放
pinch
pinchopen
兩手指放大,然后觸點離開設備
pinchclose
兩手指縮小,然后觸點離開設備
(rotate)兩指的旋轉
rotatecw
兩手指旋轉順時針,然后觸點離開設備
rotateccw
兩手指旋轉逆時針,然后觸點離開設備
(swipe)滑動手勢
swipemove
swipeone
swipetwo
swipethree
swipefour
1~4個觸點的滑動
swipeup
swiperightup
swiperight
swiperightdown
swipedownswipeleftdown
swipeleft
swipeleftup
朝不同方向的滑動
(tap)
tapone
taptwo
tapthree
1~3次點擊
(shake)搖動設備
shake
搖動設備
shakefrontback
前后搖動
shakeleftright
左右搖動
shakeupdown
上下搖動

遇到的一些問題:

嘗試了左右滑動的swipeleft和swiperight,但是發現並沒有效果,然后在swiperight的基礎上還綁定了swiperightup和swipeleftdown兩個事件

jQuery('#swipe').bind('swiperight swiperightupswiperightdown',eventHandler

然后就滑動事件就順利觸發了。猜想可能是left的觸發條件區間比較小,垂直位置上移動距離過大就被指向了leftup或者leftdown的事件了。

可以禁止本來的滑動,防止干擾

event.preventDefault();


配合響應式布局

支持手勢之后,再配合以響應式布局的頁面,在移動端的展示就可以更加接近於App
因為項目在移動端只是以內容展示為主的,主要的操作編輯不在移動端,沒有復雜的操作。考慮到只是原型,這樣可以免去了客戶端的開發,學習成本低了好多。

=================================
事件列表

orientationchange
代表設備順時針或者逆時針旋轉.此事件可以被設備觸發,可能使用的是重力傳感器.

pinch
縮放手勢(兩個手指在屏幕上的相對運動)

rotate
旋轉手勢(兩個手指順時針或者逆時針旋轉)

swipemove
在正在滑動時觸發(在設備屏幕上移動手指,比如:拖動)

swipeone
單點滑動手勢,滑動完成后觸發(一個手指在屏幕上移動)

swipetwo
兩點滑動(兩個手指在屏幕上方向一致的滑動)

swipethree
三點滑動(三個手指在屏幕上方向一致的滑動)

swipefour
四點滑動(四個手指在屏幕上方向一致的滑動)

swipeup
向上滑動,在嚴格的向上滑動手勢完成后觸發

swiperightup
向右上角滑動,在向右且向上的滑動手勢完成后觸發

swiperight
向右滑動,在嚴格的向右滑動手勢完成后觸發

swiperightdown
向右下角滑動,在向右且向下的滑動手勢完成后觸發

swipedown
向下滑動,在嚴格的向下滑動手勢完成后觸發

swipeleftdown
向左下角滑動,在向左且向下的滑動手勢完成后觸發

swipeleft
向左滑動,在嚴格的向左滑動手勢完成后觸發

swipeleftup
向左上角滑動,在向左且向上的滑動手勢完成后觸發

tapone
在單個手指輕點的手勢后觸發

taptwo
在兩個手指一起輕點的手勢后觸發

tapthree
在三個手指一起輕點的手勢后觸發

pinchopen
撐開手勢,當兩個手指撐大並離開設備時觸發.

pinchclose
捏緊手勢,當兩個手指捏緊並離開設備時觸發.

rotatecw
兩個手指順時針旋轉並且離開屏幕時觸發(two fingers rotating clockwise)

rotateccw
兩個手指逆時針旋轉並且離開屏幕時觸發 (two fingers rotating counterclockwise)

shake
當檢測到設備正在搖晃時觸發

shakefrontback
當檢測到搖晃動作,且可以被解讀為前后移動之時觸發.

shakeleftright
當檢測到搖晃動作,且可以被解讀為左右移動之時觸發.

shakeupdown
當檢測到搖晃動作,且可以被解讀為上下移動之時觸發.

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM