快捷導(dǎo)航

Node.js+ES6+dropload.js實現(xiàn)移動端下拉加載實例

更新時間：2017年06月01日 11:23:36 作者：newArray

這個demo服務(wù)由Node搭建服務(wù)、下拉加載使用插件dropload,數(shù)據(jù)渲染應(yīng)用了ES6中的模板字符串。有興趣的小伙伴可以自己嘗試下

最近要涉及微信移動端項目，所以嘗試學(xué)習(xí)一些移動端的實用技能，這個demo服務(wù)由Node搭建服務(wù)、下拉加載使用插件dropload,數(shù)據(jù)渲染應(yīng)用了ES6中的模板字符串。有興趣的小伙伴可以自己嘗試下。

1.Node+express -- 服務(wù)搭建

由于該demo是在服務(wù)器端實現(xiàn)，所以需要通過npm包引入express模塊，用來搭建簡易服務(wù)。

1.官網(wǎng)下載node,npm包管理工具會同時自動下載。

2.命令行輸入：npm install express -g //安裝express模塊

3.在項目中新建server.js //起服務(wù)

  //server.js代碼部分
  require("express")().get("*",function(req,res){
    res.sendFile(__dirname + req.path);
  }).listen(8888,function(){//訪問demo的端口為8888
    console.log(" 服務(wù)已啟動")
  })

  //這樣，一個簡易的瀏覽器端服務(wù)就搭建起來了。

2.新建文件保存數(shù)據(jù)--count.json

在項目目錄下面建立一個data文件夾，里面新建一個count.json(名字可任意起)

  //data.json代碼部分
  [{
  "month":"3月",
  "record":[
    {
  "action":"充值",
  "pay":"12546.00",
  "balance":"3445.00",
  "time":"2015-03-15 15:03"
},
  .........//這里省略了部分?jǐn)?shù)據(jù)
    {
  "action":"充值",
  "pay":"2546.00",
  "balance":"3444.00",
  "time":"2015-03-15 15:03"
},
{
  "action":"充值",
  "pay":"3546.00",
  "balance":"343.00",
  "time":"2015-03-15 15:03"
},
    {
  "action":"騰訊游戲",
  "pay":"1846.00",
  "balance":"344.00",
  "time":"2015-03-15 15:03"
}
]
},
{
  "month":"4月",
  "record":[
    {
  "action":"充值",
  "pay":"88888.00",
  "balance":"3445.00",
  "time":"2015-03-15 15:03"
},
  ..........//省略數(shù)據(jù)
    {
  "action":"充值",
  "pay":"99999.00",
  "balance":"3444.00",
  "time":"2015-03-15 15:03"
},
    {
  "action":"充值",
  "pay":"354346.00",
  "balance":"343.00",
  "time":"2015-03-15 15:03"
},
    {
  "action":"充值",
  "pay":"18463242.00",
  "balance":"344.00",
  "time":"2015-03-15 15:03"
}
  ]
},
{
  "month":"5月",
  "record":[
    {
  "action":"充值",
  "pay":"2323232.00",
  "balance":"3445.00",
  "time":"2015-03-15 15:03"
},
    {
  "action":"充值",
  "pay":"324234.00",
  "balance":"3444.00",
  "time":"2015-03-15 15:03"
},
  ..........//省略數(shù)據(jù)
    {
  "action":"充值",
  "pay":"1846.00",
  "balance":"344.00",
  "time":"2015-03-15 15:03"
}
  ]
}
]
//該文件中的數(shù)據(jù)，就是即將渲染在頁面中的數(shù)據(jù)

3.HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>我的賬戶</title>
  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">//別忘記加上移動端這個屬性
  <link rel="stylesheet" type="text/css" href="css/dropload.css" rel="external nofollow" >//dropload.css為下拉加載樣式
  <link rel="stylesheet" type="text/css" href="css/wechat.css" rel="external nofollow" >//wechat.css文件為自己定義樣式的文件
</head>
<body>
<!-- 賬戶頭部 -->
  <header>
    <p class="count">現(xiàn)金賬戶（元）</p>
    <h3 class="countMoney">8888.88</h3>
  </header>
<!-- 月份區(qū)域 -->
  <section class="monthArea">
    <section class="month monthselect">3月</section>//monthselect為剛進(jìn)入頁面時為該section添加樣式
    <section class="month">4月</section>
    <section class="month">5月</section>
  </section>
<!-- 賬戶詳情 -->
  <footer>
    <section class="detail">
      <ul class="forDetail">

      </ul>
      <ul class="forDetail">

      </ul>
      <ul class="forDetail">

      </ul>
    </section>
  </footer>
</body>
  <script src="js/jquery-1.7.1.min.js"></script>
  <script src="js/dropload.js"></script>
  <script src="js/wechat.js"></script>//頁面js邏輯代碼
</html>

4.wechat.js

/*
* @Author: rui.wei
* @Date:  2017-04-26 21:23:44
* @Last Modified by:  yp-tc-m-2478
* @Last Modified time: 2017-05-31 17:02:54
*/

$(function(){

  var shouyeData=[],tabLenghtArray=[];
  var firstLength,secondLenth,thirdLength;//頁面中3月、4月、5月數(shù)據(jù)的長度
  $.get("http://localhost:8888/data/count.json",function(response)     {
      shouyeData = response;//把獲取到的數(shù)據(jù)賦值給先前定義的變量，方便后續(xù)操控數(shù)據(jù)
      firstLength = response[0].record.length;//3月數(shù)據(jù)長度
      secondLenth = response[1].record.length;//4月數(shù)據(jù)長度
      thirdLength = response[2].record.length;//5月數(shù)據(jù)長度
      tabLenghtArray = [firstLength, secondLenth, thirdLength];//該變量用來保存每個月份的數(shù)據(jù)長度
            });

   var itemIndex = 0;//進(jìn)入頁面默認(rèn)顯示3月數(shù)據(jù)

   var tabLoadEndArray = [false, false, false];//用來標(biāo)記當(dāng)前月份數(shù)據(jù)是否全部渲染完畢

   var tabScroolTopArray = [0, 0, 0];//用來記錄當(dāng)前月份模塊滑動的距離

  // dropload
  var dropload = $('.detail').dropload({
    scrollArea: window,//滑動區(qū)域為window
    domDown: {
      domClass: 'dropload-down',
      domRefresh: '<div class="dropload-refresh">上拉加載更多</div>',//加載更多的樣式定義
      domLoad: '<div class="dropload-load"><span class="loading"></span>加載中...</div>',//加載中的樣式定義
      domNoData: '<div class="dropload-noData">已無數(shù)據(jù)</div>'//沒有數(shù)據(jù)樣式定義
    },
    loadDownFn: function (me) {//向上滑動時觸發(fā)該函數(shù)
      setTimeout(function () {
        if (tabLoadEndArray[itemIndex]) {//當(dāng)前月份模塊的數(shù)據(jù)已經(jīng)全部加載完畢時，執(zhí)行以下操作
          me.resetload();//重新加載,每次數(shù)據(jù)插入，必須重置
          me.lock();//鎖定
          me.noData();//無數(shù)據(jù)
          me.resetload();
          return;
        }
        var result = '';//定義變量值，下面用來保存當(dāng)前月份數(shù)據(jù)
        for (var index = 0; index <5; index++) {//index值用來控制頁面滑動時一次性加載幾個數(shù)據(jù)
          if (tabLenghtArray[itemIndex] > 0) {//當(dāng)前月份數(shù)據(jù)--到0時，改變狀態(tài)為true,即為不可加載數(shù)據(jù)
            tabLenghtArray[itemIndex]--;
          } else {
            tabLoadEndArray[itemIndex] = true;
            break;
          }
          if (itemIndex == 0) {//3月份時數(shù)據(jù)result,這里的13-[tabLenghtArray[itemIndex]]是為了將數(shù)據(jù)正著渲染在頁面上，之前3月份的數(shù)據(jù)長度為14，這里需要減1
            var obj = shouyeData[0].record[13-[tabLenghtArray[itemIndex]]];
            result += `//模板字符串解析對象${}
                  <li class="detailLi">
                <p class="detailp1"><span class="fl">${obj.action}</span><span class="fr weight">${obj.pay}</span></p>
                <p class="detailp2"><span class="fl">余額：${obj.balance}</span><span class="fr">${obj.time}</span></p>
              </li>
            `
          } else if (itemIndex == 1) {
           var obj = shouyeData[1].record[6-[tabLenghtArray[itemIndex]]];

            result +=`
                  <li class="detailLi">
                <p class="detailp1"><span class="fl">${obj.action}</span><span class="fr weight">${obj.pay}</span></p>
                <p class="detailp2"><span class="fl">余額：${obj.balance}</span><span class="fr">${obj.time}</span></p>
              </li>
            `

          } else if (itemIndex == 2) {
            var obj = shouyeData[2].record[6-[tabLenghtArray[itemIndex]]];

            result +=`
              <li class="detailLi">
                <p class="detailp1"><span class="fl">${obj.action}</span><span class="fr weight">${obj.pay}</span></p>
                <p class="detailp2"><span class="fl">余額：${obj.balance}</span><span class="fr">${obj.time}</span></p>
              </li>
            ` 

          }
        }
        $('.forDetail').eq(itemIndex).append(result);//將數(shù)據(jù)渲染進(jìn)對應(yīng)的月份模塊
        me.resetload();
      }, 500);

     }

  });

  //下面這個代碼是控制點擊對應(yīng)月份時,顯示對應(yīng)月份的數(shù)據(jù)和tab切換效果
  $('.monthArea .month').on('click', function () {
    tabScroolTopArray[itemIndex] = $(window).scrollTop();
    var $this = $(this);
    itemIndex = $this.index();
    $(window).scrollTop(tabScroolTopArray[itemIndex]);

    $(this).addClass('monthselect').siblings().removeClass('monthselect');
    $('.tabHead .border').css('left', $(this).offset().left + 'px');
    $('.forDetail').eq(itemIndex).show().siblings('.forDetail').hide();
    if (!tabLoadEndArray[itemIndex]) {
      dropload.unlock();
      dropload.noData(false);
    } else {
      dropload.lock('down');
      dropload.noData();
    }
    dropload.resetload();
  });  
})

5.啟動服務(wù)

在命令行進(jìn)入當(dāng)前文件夾，輸入node server.js啟動服務(wù)。再在瀏覽器地址欄中輸入localhost:8888/wechat.html,即可看到下拉加載效果已經(jīng)實現(xiàn)。