首页
所有分类
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函数使用技巧之 setTimeout(function(){},0)
Feb 09 Javascript
jquery 弹出层注册页面等(asp.net后台)
Jun 17 Javascript
jquery ui dialog实现弹窗特效的思路及代码
Aug 03 Javascript
js中如何复制一个对象并获取其所有属性和属性对应的值
Oct 24 Javascript
extJS中常用的4种Ajax异步提交方式
Mar 07 Javascript
JavaSacript中charCodeAt()方法的使用详解
Jun 05 Javascript
JavaScript数组去重的3种方法和代码实例
Jul 01 Javascript
ionic隐藏tabs的方法
Aug 29 Javascript
KnockoutJS 3.X API 第四章之click绑定
Oct 10 Javascript
js实现带三角符的手风琴效果
Mar 01 Javascript
微信小程序地图绘制线段并且测量(实例代码)
Jan 02 Javascript
vue组件创建的三种方式小结
Feb 03 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
springCloud(6) 远程连接(2) 逻辑备份(1) 生命周期(1) reduce()(1) 轮询锁(1) 死锁(3) 限流器(1) 信号同步(1) 异步机制(1)
You might like
PHP的substr_replace将指定两位置之间的字符替换为*号
2011/05/04 PHP
PHP包含文件函数include、include_once、require、require_once区别总结
2014/04/05 PHP
PHP Header用于页面跳转时的几个注意事项
2016/10/21 PHP
PHP实现随机数字、字母的验证码功能
2018/08/01 PHP
HTML5如何适配 iPhone IOS 底部黑条
2021/03/09 HTML / CSS
Bookmarklet实现启动jQuery(模仿 云输入法)
2010/09/15 Javascript
jquery中ajax调用json数据的使用说明
2011/03/17 Javascript
jquery实现仿Flash的横向滑动菜单效果代码
2015/09/17 Javascript
angularjs学习笔记之三大模块（modal，controller，view）
2015/09/26 Javascript
javascript实现网站加入收藏功能
2015/12/16 Javascript
原生javascript+css3编写的3D魔方动画旋扭特效
2016/03/14 Javascript
javascript对象的相关操作小结
2016/05/16 Javascript
jQuery插件版本冲突的处理方法分析
2017/01/16 Javascript
原生javascript实现图片放大镜效果
2017/01/18 Javascript
bootstrap常用组件之头部导航实现代码
2017/04/20 Javascript
详解JSONObject和JSONArray区别及基本用法
2017/10/25 Javascript
vue slot 在子组件中显示父组件传递的模板
2018/03/02 Javascript
对node.js中render和send的用法详解
2018/05/14 Javascript
浅谈angular表单提交中ng-submit的默认使用方法
2018/09/30 Javascript
微信小程序中显示倒计时代码实例
2019/05/09 Javascript
[03:22]DSPL第一期精彩集锦：酷炫到底！
2014/11/07 DOTA
python连接mysql实例分享
2016/10/09 Python
Python并发编程协程(Coroutine)之Gevent详解
2017/12/27 Python
Python eval的常见错误封装及利用原理详解
2019/03/26 Python
详解python解压压缩包的五种方法
2019/07/05 Python
Python守护进程实现过程详解
2020/02/10 Python
python 绘制国旗的示例
2020/09/27 Python
关于python中导入文件到list的问题
2020/10/31 Python
pycharm 实现调试窗口恢复
2021/02/05 Python
css3隔行变换色实现示例
2014/02/19 HTML / CSS
史蒂夫·马登加拿大官网：Steve Madden加拿大
2017/11/18 全球购物
仓管员岗位责任制
2014/02/19 职场文书
Canvas跟随鼠标炫彩小球的实现
2021/04/11 Javascript
Redis 持久化 RDB 与 AOF的执行过程
2021/11/07 Redis
IIS服务器中设置HTTP重定向访问HTTPS
2022/04/29 Servers
解决Mysql中的innoDB幻读问题
2022/04/29 MySQL