欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

移動端實現(xiàn)下拉刷新

第一部分：四個touch事件

1.touchstart：只要將手指放在了屏幕上（而不管是幾只）,都會觸發(fā)touchstart事件。

創(chuàng)新互聯(lián)建站是一家集網(wǎng)站建設(shè),東烏珠穆沁企業(yè)網(wǎng)站建設(shè),東烏珠穆沁品牌網(wǎng)站建設(shè),網(wǎng)站定制,東烏珠穆沁網(wǎng)站建設(shè)報價,網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,東烏珠穆沁網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競爭力。可充分滿足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(wǎng)站。

2.touchmove: 當(dāng)我們用手指在屏幕上滑動時，這個事件會被連續(xù)觸發(fā)。 如果我們不希望頁面隨之滑動，我們可以使用event的preventDefault來阻止這個默認(rèn)行為。

3.touchend: 當(dāng)手指滑動后離開屏幕，這時就觸發(fā)了touchend事件。

4.touchcancel: 系統(tǒng)停止跟蹤觸摸時候會觸發(fā)。例如在觸摸過程中突然頁面alert()一個提示框，此時會觸發(fā)該事件，這個事件比較少用。

第二部分：四個touch對象

 1. touches，這是一個類數(shù)組對象，包含了所有的手指信息，如果只有一個手指，那么我們用touches[0]來表示。

 2. targetTouches 。 手指在目標(biāo)區(qū)域的手指信息。

     3. changedTouches：最近一次觸發(fā)該事件的手指信息。

     4. touchend時，touches與targetTouches信息會被刪除，changedTouches保存的最后一次的信息，最好用于計算手指信息。

 

第三部分：實例1

先看效果圖：

移動端實現(xiàn)下拉刷新

它的實現(xiàn)原理非常簡單，就是將紅色圓形的postion屬性設(shè)為absolute，然后，當(dāng)我們滑動它時，就觸發(fā)了touchmove事件，將其Left和top設(shè)置為event的pageX和pageY即可，為保證觸發(fā)中心與圓心在同一位置，只需將pageX加上width的一半，pageY加上height的一半。

源碼如下：

移動端實現(xiàn)下拉刷新

<!DOCTYPE html>
<html>
<head>
    <title>touchExample</title>
    <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 
    <style>
        #touchDiv{
            position: absolute;
            width: 50px;
            height: 50px;
            top: 20px;
            left: 20px;
            text-align: center;
            line-height: 50px;
            color:white;
            border-radius: 50%;
            background-color: red;
        }    </style>
</head>
<body>
    <div id="touchDiv">點我</div>
    <script>        var touchDiv = document.getElementById("touchDiv");        var x,y;
        touchDiv.addEventListener("touchstart",canDrag);
        touchDiv.addEventListener("touchmove",drag);
        touchDiv.addEventListener("touchend",nodrag);
        function canDrag (e) {
            console.log("god開始");
        }
        function drag (e) {
            $("#touchDiv").css("left",e.touches[0].pageX-25);
            $("#touchDiv").css("top",e.touches[0].pageY-25);
        }
        function nodrag () {
            console.log("god結(jié)束");
        }    </script>
</body>
</html>

移動端實現(xiàn)下拉刷新

 

　　

 第四部分：實例2

這個實例就是下拉刷新功能的實現(xiàn)，效果如下：

移動端實現(xiàn)下拉刷新

 

源碼如下：

移動端實現(xiàn)下拉刷新

<!DOCTYPE html>
<html>
<head>
    <title>下拉刷新</title>
    <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
    <style>
        *{
            margin:0;
            padding: 0;
            font-size:15px;
        }
        .header{
            height: 50px;
            line-height: 50px;
            text-align: center;
            background-color: blue;
            color:white;
            font-size: 23px;
        }
        .drag_to_refresh{
            align-items: center;
            padding-left: 155px;
            background-color: #bbb;
            color:yellow;
            display: none;
        }
        .refresh{
            height: 50px;
            line-height: 50px;
            text-align: center;
            background-color: #bbb;
            color: green;
            display: none;
        }
        .drag{
            text-align: center;
            background-color: lightgray;
            position: relative;
            padding:20px;
            text-indent: 1em;
            line-height: 30px;
            font-size:18px;
        }    </style>
</head>
<body>
    <div class="header">政務(wù)云</div>
    <div class="drag_to_refresh"></div>
    <div class="refresh">刷新中...</div>
    <div class="drag">電子政務(wù)云（E-government cloud）屬于政府云，結(jié)合了云計算技術(shù)的特點，對政府管理和服務(wù)職能進(jìn)行精簡、優(yōu)化、整合，并通過信息化手段在政務(wù)上實現(xiàn)各種業(yè)務(wù)流程辦理和職能服務(wù)，為政府各級部門提供可靠的基礎(chǔ)IT服務(wù)平臺。</div>
<script>window.onload = function () {    var initX;    var drag_content = document.querySelector(".drag");    var drag_to_refresh = document.querySelector(".drag_to_refresh");    var refresh = document.querySelector(".refresh");

    drag_content.addEventListener("touchmove",drag);
    drag_content.addEventListener("touchstart",dragStart);
    drag_content.addEventListener("touchend",dragEnd);

    function dragStart(e){
        initY = e.touches[0].pageY;
        console.log(initX);
    }

    function drag (e){
        drag_to_refresh.style.display = "block";
        drag_to_refresh.style.height = (e.touches[0].pageY - initY) + "px";
        console.log(drag_to_refresh.style.height);        if(parseInt(drag_to_refresh.style.height)>=100){            // 注意：因為height得到的值是px為單位，所以用parseInt解析
            drag_to_refresh.style.height = "100px";            if(parseInt(drag_to_refresh.style.height)>80){
                drag_to_refresh.style.lineHeight = drag_to_refresh.style.height;
                drag_to_refresh.innerHTML  = "松開刷新";
            }
        }
    }

    function dragEnd (e){        if(parseInt(drag_to_refresh.style.height)>80){
            refresh.style.display = "block";
            setTimeout(reload,1000);
        }
        drag_to_refresh.style.display = "none"; 
    }

    function reload () {
        location.reload();
    }
}</script>
</body>
</html>

移動端實現(xiàn)下拉刷新

 

網(wǎng)站欄目：移動端實現(xiàn)下拉刷新
標(biāo)題路徑：http://chinadenli.net/article40/podceo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站改版、自適應(yīng)網(wǎng)站、營銷型網(wǎng)站建設(shè)、小程序開發(fā)、企業(yè)建站、網(wǎng)站收錄

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

外貿(mào)網(wǎng)站建設(shè)