如何寫一個整屏滑動的移動頁面

hot_pot_Leo 發(fā)布于2019-08-21 12:31 / 1789人閱讀

摘要：國慶前幾天花了點時間寫一個整屏滑動的移動頁面的，時間短暫還有很多東西沒寫。其中碰到的坑是的時間通過無法阻擋默認事件，只能，但是電腦上模擬移動頁面可以使用

國慶前幾天花了點時間寫一個整屏滑動的移動頁面的demo，時間短暫還有很多東西沒寫。

跟基友 http://segmentfault.com/blog/laopopo/1190000000708417 差不多，但思路上不太一樣，大家可以看看他的源碼感受一下其中的區(qū)別。

從監(jiān)聽開始，用一個變量記錄觸摸的起點位置，然后move的時候用move的觸發(fā)的clientY的值減去起點位置，讓頁面滑動那個差值的距離，這個距離可能為負為正，然后end的時候判斷需要往哪邊修正位置。
end的時候我做的處理是先判斷滑動的方向，（這個怎么判斷呢？在move的時候用一個變量記錄move的位置，然后用最后一個減去start的時候記錄的位置，差值正負就是方向了）我預先計算了每一個div離頁面最頂部的位置，然后倒序找第一個為負的元素，如果同時是向上滑動且下一個元素冒出頭來的距離大于六分之一屏幕，就把下面的拉上來，如果同時是向下滑動且上一個元素冒出尾部的距離大于六分之一就把上面的拉下來。

其中碰到的坑是move的時間通過return false無法阻擋默認事件，只能e.preventDefault()，但是電腦上模擬移動頁面可以使用return false

http://segmentfault.com/q/1010000000707907

云服務器 GPU云服務器 asp寫一個登陸頁面如何寫一個爬蟲 php如何寫一個除法 java如何寫一個線程

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/87642.html

相關(guān)文章

使用Slip.js快速創(chuàng)建整屏滑動的手機網(wǎng)頁

摘要：解說暴露到全局的方法，只要你引入，就可以得到這個實用牛逼的方法。設(shè)置頁面展現(xiàn)為全屏滑動頁面的方法。至此，一個全屏滑動網(wǎng)頁就完成了，難以想象的簡單快速。注意頁數(shù)是從開始的，所以上面的最后一頁是，而不是。如果想迫切試用，可以直接查看文檔。現(xiàn)在滑屏網(wǎng)頁越來越多，比如我在搜狐視頻就做了好幾個，舉個例子，可以用手機掃描以下的二維碼訪問： showImg(http://qianbao.baid...

lucas 2019-08-21 12:31 評論0 收藏0
移動端手勢庫設(shè)計與實踐

摘要：前言本次給大家分享的是常見的移動端單點觸摸事件的設(shè)計思路及實踐。實現(xiàn)即手指滑動事件，應用場景如輪播圖左右滑動切換，整屏頁面滑動翻頁等，算是移動端最常見的手勢之一了。前言本次給大家分享的是常見的移動端單點觸摸事件的設(shè)計思路及實踐。核心技術(shù) 主要就是利用移動端的以下3個觸摸事件，來模擬和實現(xiàn)自定義的手勢操作 touchstart：手指觸摸到屏幕的一瞬間觸發(fā) touchmove：手指...

wudengzan 2019-08-22 15:45 評論0 收藏0
移動端開發(fā)（使用webuploader上傳圖片,客戶端交互,修改alert彈窗等）

摘要：之前實習做的一個移動端的頁面需要的功能有圖片上傳點擊客戶端的返回按鈕有提示即與客戶端有交互遇到不少的坑總結(jié)一下問題圖片上傳功能使用工具百度的暫時遇到的坑刪除圖片實際上并沒有完全刪除需要自己在源碼上添加詳情看的提問上傳的圖片旋轉(zhuǎn)角度有問題比之前實習做的一個移動端的頁面需要的功能有圖片上傳點擊客戶端的返回按鈕有提示(即與客戶端有交互）遇到不少的坑總結(jié)一下問題 1.圖片上傳功能 ...

李昌杰 2019-08-19 17:26 評論0 收藏0
模擬 background-size 樣式開發(fā)整屏頁面

摘要：我們在做移動端開發(fā)的時候經(jīng)常遇到這樣的需求界面背景要剛剛好在整個屏幕中，不能超出屏幕，而且肯定還有一些元素要固定在界面中某個位置。模擬開發(fā)整屏頁面最近在做一個新頁面的時候，我不滿足于上面的方法，就想看看有沒有別的解決辦法。我們在做移動端開發(fā)的時候經(jīng)常遇到這樣的需求：界面背景要剛剛好在整個屏幕中，不能超出屏幕，而且肯定還有一些元素要固定在界面中某個位置。比如這樣的設(shè)計圖（720 x ...

int64 2019-08-19 17:10 評論0 收藏0
切圖崽的自我修養(yǎng)－CSS踩坑紀錄

摘要：解決方法設(shè)置即可其實所有的都會出現(xiàn)這個問題，瀏覽器會自動給元素的結(jié)尾添加一個空白字符大小和有關(guān)解決方法可以對父元素設(shè)置再在該元素里把設(shè)置回來的設(shè)置百分比是根據(jù)父元素的寬度來的。結(jié)語坑先挖這么點，以后碰到再陸續(xù)補充前言簡單記錄一下工作中經(jīng)常碰到的css的一些坑，歡迎隨時拍磚水平居中該元素是position:nomal, 父元素內(nèi)block子元素定寬的情況下，對子元素采...

用戶83 2019-08-29 10:58 評論0 收藏0