国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專(zhuān)欄INFORMATION COLUMN

原生js實(shí)現(xiàn)簡(jiǎn)單的下拉刷新功能

graf / 2361人閱讀

摘要:現(xiàn)在我們用原生的實(shí)現(xiàn)這個(gè)非常簡(jiǎn)單的下拉刷新功能。二封裝下拉刷新的功能模塊首先創(chuàng)建一個(gè)構(gòu)造函數(shù),用來(lái)初始化屬性與函數(shù)。和下拉刷新這個(gè)兩個(gè)子節(jié)點(diǎn)。的效果顯示出來(lái),同時(shí)隱藏下拉刷新的效果開(kāi)始刷新這里是模擬秒后刷新成功,然后隱藏正在刷新。。

前言:

我們?cè)跒g覽移動(dòng)端web頁(yè)面的時(shí)候,經(jīng)常會(huì)用到下拉刷新。
現(xiàn)在我們用原生的js實(shí)現(xiàn)這個(gè)非常簡(jiǎn)單的下拉刷新功能。

(溫馨提示:本文比較基礎(chǔ),功能也很簡(jiǎn)單。寫(xiě)的不好的地方,希望大神提點(diǎn)一二。)

一、創(chuàng)建簡(jiǎn)單的html頁(yè)面:

假設(shè)代碼里的float-box是一個(gè)主頁(yè)面。

二、封裝下拉刷新的功能模塊:

(1)首先創(chuàng)建一個(gè)Slide構(gòu)造函數(shù),用來(lái)初始化屬性與函數(shù)。
function Slide(dom){
    this.start_y=null;//手指滑動(dòng)屏幕的初始位置
    this.end_y=null;//手指滑動(dòng)屏幕的結(jié)束位置
    this.render(dom);//初始化下拉功能的render函數(shù),這里的dom參數(shù)是你的主頁(yè)面。
}
(2)編寫(xiě)render函數(shù)
render函數(shù)是用來(lái)動(dòng)態(tài)創(chuàng)建下拉刷新的動(dòng)畫(huà)圖。現(xiàn)在我們?cè)赟lide原型上編寫(xiě)render函數(shù)。
    Slide.prototype={
    render:function(dom){
        //拿到body節(jié)點(diǎn)
        var body = document.getElementsByTagName("body");
        //創(chuàng)建div,用來(lái)顯示下拉效果。這個(gè)div有"正在刷新。。" 和 "下拉刷新" 這個(gè)兩個(gè)子節(jié)點(diǎn)。
        var newItem = document.createElement("div");
        //給div設(shè)置class屬性,該class是下拉效果的樣式
        newItem.className = "slide-wrap";
        //利用innerHTML將  "正在刷新。。。" 和 "下拉刷新" 這兩個(gè)子節(jié)點(diǎn)插入到上面創(chuàng)建的div中。
        newItem.innerHTML = "
正在刷新。。。
"+"
下拉刷新
"; //然后將創(chuàng)建的div插入到主頁(yè)面的前面 body[0].insertBefore(newItem,dom[0]); //獲取創(chuàng)建完成的下拉刷新div var dom2 = document.getElementsByClassName("slide-wrap"); //運(yùn)行slide_start() this.slide_start(dom2); }}

下圖為下拉刷新的css樣式:

(3)編寫(xiě)slide_start()函數(shù)

slide_start:function(dom2){
    var _this = this;
    //監(jiān)聽(tīng)document整個(gè)文檔的touchstart事件
    document.addEventListener("touchstart",function(evt){
        var touch = evt.touches[0]; //獲取第一個(gè)觸點(diǎn)
        _this.start_y = Number(touch.pageY);//第一個(gè)觸點(diǎn)的Y坐標(biāo) 
    });
    //運(yùn)行slide_move
    _this.slide_move(dom2);
}

(4)編寫(xiě)slide_move()函數(shù)

slide_move:function(dom2){
    var _this = this;
    //監(jiān)聽(tīng)document的touchmove事件
    document.addEventListener("touchmove",function(evt){
        //下面這一行代碼是保證在手指移動(dòng)的距離還不到規(guī)定的長(zhǎng)度時(shí)候,就不顯示 "正在刷新。。" 
        dom2[0].childNodes[0].style.display="none";
        var touch = evt.touches[0]; //獲取第一個(gè)觸點(diǎn)
        //獲取手指向下移動(dòng)的長(zhǎng)度距離
        _this.end_y = Number(touch.pageY) - _this.start_y; 
        //判斷手指移動(dòng)距離是否大于5.這個(gè)為什么設(shè)置為5,而不是0呢,主要是為了避免用戶不覺(jué)意的輕微滑動(dòng)
        if(_this.end_y > 5){
        //當(dāng)滑動(dòng)距離大于5時(shí),將 ‘下拉刷新’ 的效果顯示出來(lái),同時(shí)將它的高度賦值為手指滑動(dòng)的距離,以達(dá)到慢慢下拉的效果
            dom2[0].childNodes[1].style.display = "block";
            dom2[0].childNodes[1].style.height = _this.end_y +"px";
            dom2[0].childNodes[1].style.lineHeight = _this.end_y +"px";
        }
   });
   //執(zhí)行slide_end()函數(shù)
   this.slide_end(dom2);
}

(5)編寫(xiě)slide_end()函數(shù)

slide_end:function(dom2){
    var _this = this;
    //監(jiān)聽(tīng)touchend事件
    document.addEventListener("touchend",function(evt){
    //當(dāng)手指送開(kāi)的時(shí)候,判斷手指的滑動(dòng)距離如果大于100就將 "正在刷新。。" 的效果顯示出來(lái),同時(shí)隱藏 "下拉刷新" 的效果
      if(_this.end_y > 100){
          dom2[0].childNodes[1].style.display="none";
          dom2[0].childNodes[0].style.display="block";
          console.log("開(kāi)始刷新");
          //這里是模擬3秒后刷新成功,然后隱藏 "正在刷新。。" 效果 
          setTimeout(function(){
              dom2[0].childNodes[0].style.display="none";
          },3000);
      }else{
      //這里是當(dāng)手指滑動(dòng)距離小于100時(shí),就將 "下拉刷新" 效果隱藏。也就是什么也不做
          dom2[0].childNodes[1].style.display = "none";
      }
   });
}

(5)最后將Slide構(gòu)造函數(shù)暴露到全局window里:

window.Slide=Slide;

整個(gè)下刷新功能到這了就完了。很簡(jiǎn)單吧。
下面是完整的封裝代碼。
;(function(){

function Slide(dom){
    this.start_y=null;
    this.end_y=null;
    this.render(dom);
}
Slide.prototype={
    // 動(dòng)態(tài)創(chuàng)建下拉刷新特效
    render:function(dom){
        var body = document.getElementsByTagName("body");
        var newItem = document.createElement("div");
        newItem.className = "slide-wrap";
        newItem.innerHTML = "
正在刷新。。。
"+"
下拉刷新
"; body[0].insertBefore(newItem,dom[0]); var dom2 = document.getElementsByClassName("slide-wrap"); this.slide_start(dom2); }, slide_start:function(dom2){ var _this = this; document.addEventListener("touchstart",function(evt){ var touch = evt.touches[0]; //獲取第一個(gè)觸點(diǎn) _this.start_y = Number(touch.pageY); }); _this.slide_move(dom2); }, slide_move:function(dom2){ var _this = this; document.addEventListener("touchmove",function(evt){ dom2[0].childNodes[0].style.display="none"; var touch = evt.touches[0]; //獲取第一個(gè)觸點(diǎn) _this.end_y = Number(touch.pageY) - _this.start_y; if(_this.end_y > 5){ dom2[0].childNodes[1].style.display = "block"; dom2[0].childNodes[1].style.height = _this.end_y +"px"; dom2[0].childNodes[1].style.lineHeight = _this.end_y +"px"; } }); this.slide_end(dom2); }, slide_end:function(dom2){ var _this = this; document.addEventListener("touchend",function(evt){ if(_this.end_y > 100){ dom2[0].childNodes[1].style.display="none"; dom2[0].childNodes[0].style.display="block"; console.log("開(kāi)始刷新"); setTimeout(function(){ dom2[0].childNodes[0].style.display="none"; },3000); }else{ dom2[0].childNodes[1].style.display = "none"; } }); } }

window.Slide=Slide;
})();

使用方法也很簡(jiǎn)單:在你的頁(yè)面里new一個(gè)Slide()。并且將主頁(yè)面的dom節(jié)點(diǎn)傳進(jìn)去即可。
var target = document.getElementsByClassName("float-box");
new Slide(target);

最后的效果如下圖:
持續(xù)下拉的效果:

松開(kāi)手指,正在刷新的效果:

當(dāng)然,這效果是很丑,因?yàn)橹皇莻€(gè)小demo,所以css樣式非常簡(jiǎn)單。你們可以自己發(fā)揮想象力,寫(xiě)更好看的css樣式即可。

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

轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/93619.html

相關(guān)文章

  • 原生js實(shí)現(xiàn)簡(jiǎn)單下拉刷新功能

    摘要:現(xiàn)在我們用原生的實(shí)現(xiàn)這個(gè)非常簡(jiǎn)單的下拉刷新功能。二封裝下拉刷新的功能模塊首先創(chuàng)建一個(gè)構(gòu)造函數(shù),用來(lái)初始化屬性與函數(shù)。和下拉刷新這個(gè)兩個(gè)子節(jié)點(diǎn)。的效果顯示出來(lái),同時(shí)隱藏下拉刷新的效果開(kāi)始刷新這里是模擬秒后刷新成功,然后隱藏正在刷新。。 前言: 我們?cè)跒g覽移動(dòng)端web頁(yè)面的時(shí)候,經(jīng)常會(huì)用到下拉刷新。 現(xiàn)在我們用原生的js實(shí)現(xiàn)這個(gè)非常簡(jiǎn)單的下拉刷新功能。 (溫馨提示:本文比較基礎(chǔ),功能也很簡(jiǎn)...

    ShevaKuilin 評(píng)論0 收藏0
  • 原生js實(shí)現(xiàn)簡(jiǎn)單下拉刷新功能

    摘要:現(xiàn)在我們用原生的實(shí)現(xiàn)這個(gè)非常簡(jiǎn)單的下拉刷新功能。二封裝下拉刷新的功能模塊首先創(chuàng)建一個(gè)構(gòu)造函數(shù),用來(lái)初始化屬性與函數(shù)。和下拉刷新這個(gè)兩個(gè)子節(jié)點(diǎn)。的效果顯示出來(lái),同時(shí)隱藏下拉刷新的效果開(kāi)始刷新這里是模擬秒后刷新成功,然后隱藏正在刷新。。 前言: 我們?cè)跒g覽移動(dòng)端web頁(yè)面的時(shí)候,經(jīng)常會(huì)用到下拉刷新。 現(xiàn)在我們用原生的js實(shí)現(xiàn)這個(gè)非常簡(jiǎn)單的下拉刷新功能。 (溫馨提示:本文比較基礎(chǔ),功能也很簡(jiǎn)...

    GitChat 評(píng)論0 收藏0
  • 總結(jié)開(kāi)發(fā)過(guò)程踩到坑(五)(小程序篇)

    摘要:最近開(kāi)始接觸了小程序的開(kāi)發(fā),由于時(shí)間問(wèn)題,文檔閱讀的并不完備,也踩了很多坑。的使用微信小程序不支持原生頁(yè)面跳轉(zhuǎn),包括和,若要跳轉(zhuǎn)小程序應(yīng)用內(nèi)頁(yè)面,需要使用,詳見(jiàn)。參考文獻(xiàn)微信小程序開(kāi)發(fā)者文檔 最近開(kāi)始接觸了小程序的開(kāi)發(fā),由于時(shí)間問(wèn)題,文檔閱讀的并不完備,也踩了很多坑。不得不說(shuō),微信的野心真是越來(lái)越大了,但是它超高的流量注定了它有這個(gè)資本。 原文地址:mini programs 目...

    young.li 評(píng)論0 收藏0
  • 總結(jié)開(kāi)發(fā)過(guò)程踩到坑(五)(小程序篇)

    摘要:最近開(kāi)始接觸了小程序的開(kāi)發(fā),由于時(shí)間問(wèn)題,文檔閱讀的并不完備,也踩了很多坑。的使用微信小程序不支持原生頁(yè)面跳轉(zhuǎn),包括和,若要跳轉(zhuǎn)小程序應(yīng)用內(nèi)頁(yè)面,需要使用,詳見(jiàn)。參考文獻(xiàn)微信小程序開(kāi)發(fā)者文檔 最近開(kāi)始接觸了小程序的開(kāi)發(fā),由于時(shí)間問(wèn)題,文檔閱讀的并不完備,也踩了很多坑。不得不說(shuō),微信的野心真是越來(lái)越大了,但是它超高的流量注定了它有這個(gè)資本。 原文地址:mini programs 目...

    Cympros 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<