如何寫(xiě)一個(gè)整屏滑動(dòng)的移動(dòng)頁(yè)面

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

摘要：國(guó)慶前幾天花了點(diǎn)時(shí)間寫(xiě)一個(gè)整屏滑動(dòng)的移動(dòng)頁(yè)面的，時(shí)間短暫還有很多東西沒(méi)寫(xiě)。其中碰到的坑是的時(shí)間通過(guò)無(wú)法阻擋默認(rèn)事件，只能，但是電腦上模擬移動(dòng)頁(yè)面可以使用

國(guó)慶前幾天花了點(diǎn)時(shí)間寫(xiě)一個(gè)整屏滑動(dòng)的移動(dòng)頁(yè)面的demo，時(shí)間短暫還有很多東西沒(méi)寫(xiě)。

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

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

其中碰到的坑是move的時(shí)間通過(guò)return false無(wú)法阻擋默認(rèn)事件，只能e.preventDefault()，但是電腦上模擬移動(dòng)頁(yè)面可以使用return false

http://segmentfault.com/q/1010000000707907

GPU云服務(wù)器云服務(wù)器 asp寫(xiě)一個(gè)登陸頁(yè)面如何寫(xiě)一個(gè)爬蟲(chóng) php如何寫(xiě)一個(gè)除法 java如何寫(xiě)一個(gè)線程

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/87642.html

相關(guān)文章

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

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

lucas 2019-08-21 12:31 評(píng)論0 收藏0
移動(dòng)端手勢(shì)庫(kù)設(shè)計(jì)與實(shí)踐

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

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

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

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

摘要：我們?cè)谧鲆苿?dòng)端開(kāi)發(fā)的時(shí)候經(jīng)常遇到這樣的需求界面背景要?jiǎng)倓偤迷谡麄€(gè)屏幕中，不能超出屏幕，而且肯定還有一些元素要固定在界面中某個(gè)位置。模擬開(kāi)發(fā)整屏頁(yè)面最近在做一個(gè)新頁(yè)面的時(shí)候，我不滿足于上面的方法，就想看看有沒(méi)有別的解決辦法。我們?cè)谧鲆苿?dòng)端開(kāi)發(fā)的時(shí)候經(jīng)常遇到這樣的需求：界面背景要?jiǎng)倓偤迷谡麄€(gè)屏幕中，不能超出屏幕，而且肯定還有一些元素要固定在界面中某個(gè)位置。比如這樣的設(shè)計(jì)圖（720 x ...

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

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

用戶83 2019-08-29 10:58 評(píng)論0 收藏0