Node.js、ES6、dropload.js实现移动端下拉加载

Node.js ES6 dropload


最近要涉及微信移动端项目,所以尝试学习一些移动端的实用技能,这个demo服务由Node搭建服务、下拉加载使用插件dropload,数据渲染应用了ES6中的模板字符串。有兴趣的小伙伴可以自己尝试下。

1.Node+express -- 服务搭建

由于该demo是在服务器端实现,所以需要通过npm包引入express模块,用来搭建简易服务。

1.官网下载node,npm包管理工具会同时自动下载。
2.命令行输入:npm install express -g //安装express模块
3.在项目中新建server.js //起服务

    //server.js代码部分
    require("express")().get("*",function(req,res){
        res.sendFile(__dirname + req.path);
    }).listen(8888,function(){//访问demo的端口为8888
        console.log(" 服务已启动")
    })
    
    //这样,一个简易的浏览器端服务就搭建起来了。

2.新建文件保存数据--count.json

在项目目录下面建立一个data文件夹,里面新建一个count.json(名字可任意起)

    //data.json代码部分
    [{
    "month":"3月",
    "record":[
        {
    "action":"充值",
    "pay":"12546.00",
    "balance":"3445.00",
    "time":"2015-03-15 15:03"
},
    .........//这里省略了部分数据
        {
    "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"
},
    ..........//省略数据
        {
    "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"
},
    ..........//省略数据
        {
    "action":"充值",
    "pay":"1846.00",
    "balance":"344.00",
    "time":"2015-03-15 15:03"
}
    ]
}
]
//该文件中的数据,就是即将渲染在页面中的数据

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">//dropload.css为下拉加载样式
    <link rel="stylesheet" type="text/css" href="css/wechat.css">//wechat.css文件为自己定义样式的文件
</head>
<body>
<!-- 账户头部 -->
    <header>
        <p class="count">现金账户(元)</p>
        <h3 class="countMoney">8888.88</h3>
    </header>
<!-- 月份区域 -->
    <section class="monthArea">
        <section class="month monthselect">3月</section>//monthselect为刚进入页面时为该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月数据的长度
    $.get("http://localhost:8888/data/count.json",function(response)         {
            shouyeData = response;//把获取到的数据赋值给先前定义的变量,方便后续操控数据
            firstLength = response[0].record.length;//3月数据长度
            secondLenth = response[1].record.length;//4月数据长度
            thirdLength = response[2].record.length;//5月数据长度
            tabLenghtArray = [firstLength, secondLenth, thirdLength];//该变量用来保存每个月份的数据长度
                       });
                       
     var itemIndex = 0;//进入页面默认显示3月数据
     
     var tabLoadEndArray = [false, false, false];//用来标记当前月份数据是否全部渲染完毕
        
     var tabScroolTopArray = [0, 0, 0];//用来记录当前月份模块滑动的距离
    
    // dropload
    var dropload = $('.detail').dropload({
        scrollArea: window,//滑动区域为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">已无数据</div>'//没有数据样式定义
        },
        loadDownFn: function (me) {//向上滑动时触发该函数
            setTimeout(function () {
                if (tabLoadEndArray[itemIndex]) {//当前月份模块的数据已经全部加载完毕时,执行以下操作
                    me.resetload();//重新加载,每次数据插入,必须重置
                    me.lock();//锁定
                    me.noData();//无数据
                    me.resetload();
                    return;
                }
                var result = '';//定义变量值,下面用来保存当前月份数据
                for (var index = 0; index <5; index++) {//index值用来控制页面滑动时一次性加载几个数据
                    if (tabLenghtArray[itemIndex] > 0) {//当前月份数据--到0时,改变状态为true,即为不可加载数据
                        tabLenghtArray[itemIndex]--;
                    } else {
                        tabLoadEndArray[itemIndex] = true;
                        break;
                    }
                    if (itemIndex == 0) {//3月份时数据result,这里的13-[tabLenghtArray[itemIndex]]是为了将数据正着渲染在页面上,之前3月份的数据长度为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);//将数据渲染进对应的月份模块
                me.resetload();
            }, 500);
       
         }
       
    });

    //下面这个代码是控制点击对应月份时,显示对应月份的数据和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.启动服务

在命令行进入当前文件夹,输入node server.js启动服务。再在浏览器地址栏中输入localhost:8888/wechat.html,即可看到下拉加载效果已经实现。

1
命令行启动服务

页面效果

项目文件夹
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,752评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,100评论 3 387
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 159,244评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,099评论 1 286
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,210评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,307评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,346评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,133评论 0 269
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,546评论 1 306
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,849评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,019评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,702评论 4 337
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,331评论 3 319
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,030评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,260评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,871评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,898评论 2 351

推荐阅读更多精彩内容