首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onJune 01, 2017

最近要涉及微信移动端项目，所以尝试学习一些移动端的实用技能，这个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" 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">现金账户（元）</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,即可看到下拉加载效果已经实现。

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

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

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

- Author -

newArray

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
js或css实现滚动广告的几种方案
Jan 28 Javascript
JS防止用户多次提交的简单代码
Aug 01 Javascript
jQuery实现图片渐入渐出切换展示效果
Aug 15 Javascript
JavaScript实现的多个图片广告交替显示效果代码
Sep 04 Javascript
怎么引入(调用)一个JS文件
May 26 Javascript
jQuery实现的tab标签切换效果示例
Sep 05 Javascript
JS验证 只能输入小数点,数字,负数的实现方法
Oct 07 Javascript
Bootstrap源码解读导航（6）
Dec 23 Javascript
ES6中Math对象的部分扩展
Feb 20 Javascript
canvas 绘制圆形时钟
Feb 22 Javascript
vue2 router 动态传参,多个参数的实例
Nov 10 Javascript
vue-simple-uploader上传成功之后的response获取代码
Sep 07 Javascript
详解基于webpack搭建react运行环境
Jun 01 #Javascript
jQuery+Ajax实现用户名重名实时检测
Jun 01 #jQuery
Javascript实现一个简单的输入关键字添加标签效果实例
Jun 01 #Javascript
node.js中fs.stat与fs.fstat的区别详解
Jun 01 #Javascript
vue 如何添加全局函数或全局变量以及单页面的title设置总结
Jun 01 #Javascript
详解VUE 定义全局变量的几种实现方式
Jun 01 #Javascript
详解vue过滤器在v2.0版本用法
Jun 01 #Javascript
YB235(1) YB400(2) MX500(1) YB217(1) 再生机(1) 直流胆(1) PL-365(1) 森海(1) 东方红(1) 1 Tube Radio(1)
You might like
php使用pdo连接mssql server数据库实例
2014/12/25 PHP
php实现Linux服务器木马排查及加固功能
2014/12/29 PHP
新浪SAE搭建PHP项目教程
2015/01/28 PHP
php+ajax无刷新分页实例详解
2015/12/07 PHP
PHP 实现从数据库导出到.csv文件方法
2017/07/06 PHP
PHP基于curl实现模拟微信浏览器打开微信链接的方法示例
2019/02/15 PHP
文本加密解密
2006/06/23 Javascript
基于jquery的气泡提示效果
2010/05/31 Javascript
仅IE9/10同时支持script元素的onload和onreadystatechange事件分析
2011/04/27 Javascript
利用百度地图JSAPI生成h7n9禽流感分布图实现代码
2013/04/15 Javascript
js局部刷新页面时间具体实现
2013/07/04 Javascript
JS中绑定事件顺序（事件冒泡与事件捕获区别）
2017/01/24 Javascript
ES6正则表达式的一些新功能总结
2017/05/09 Javascript
for循环 + setTimeout 结合一些示例(前端面试题）
2017/08/30 Javascript
Nodejs 发布自己的npm包并制作成命令行工具的实例讲解
2018/05/15 NodeJs
详解vue-cli3使用
2018/08/14 Javascript
uniapp,微信小程序中使用 MQTT的问题
2020/07/11 Javascript
Vue+Vant 图片上传加显示的案例
2020/11/03 Javascript
Python中运行并行任务技巧
2015/02/26 Python
django之常用命令详解
2016/06/30 Python
python中文件变化监控示例(watchdog)
2017/10/16 Python
django输出html内容的实例
2018/05/27 Python
Python正则表达式和元字符详解
2018/11/29 Python
Python selenium根据class定位页面元素的方法
2019/02/26 Python
python破解bilibili滑动验证码登录功能
2019/09/11 Python
Python 实现向word(docx)中输出
2020/02/13 Python
pyCharm 实现关闭代码检查
2020/06/09 Python
python与js主要区别点总结
2020/09/13 Python
html5本地存储 localStorage操作使用详解
2016/09/20 HTML / CSS
全球速卖通巴西站点：Aliexpress巴西
2016/08/24 全球购物
什么是静态路由？什么是动态路由？各自的特点是什么？
2015/09/16 面试题
linux面试题参考答案（11）
2012/05/01 面试题
缴纳养老保险的证明
2014/01/10 职场文书
英文导游欢迎词
2014/01/11 职场文书
技校毕业生自荐信
2014/06/03 职场文书
HTML5页面音频自动播放的实现方式
2021/06/21 HTML / CSS