首页
所有分类
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 相关文章推荐
学习ExtJS form布局
Oct 08 Javascript
javascript 数据类型转换(parseInt,parseFloat)
Jul 20 Javascript
Jquery阻止事件冒泡 event.stopPropagation
Dec 11 Javascript
js中传递特殊字符(+,&amp;)的方法
Jan 16 Javascript
jquery常用操作小结
Jul 21 Javascript
使表格的标题列可左右拉伸jquery插件封装
Nov 24 Javascript
AngularJS HTML编译器介绍
Dec 06 Javascript
JavaScript中实现sprintf、printf函数
Jan 27 Javascript
Bootstrap显示与隐藏简单实现代码
Mar 06 Javascript
微信小程序 滚动到某个位置添加class效果实现代码
Apr 19 Javascript
laravel5.4+vue+element简单搭建的示例代码
Aug 29 Javascript
Angular 向组件传递模板的两种方法
Feb 23 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
ETON(1) E1-XM(1) 66-XI(1) S900(1) 军机(1) 矿石收音机(1) VOLVO(1) R601SW(1) 沃尔沃(1) 摩托罗拉(1)
You might like
同时提取多条新闻中的文本一例
2006/10/09 PHP
PHP中的Memcache详解
2014/04/05 PHP
phpstorm配置Xdebug进行调试PHP教程
2014/12/01 PHP
php实现的mysqldb读写分离操作类示例
2017/02/07 PHP
PHP 返回数组后处理方法(开户成功后弹窗提示)
2017/07/03 PHP
Laravel使用支付宝进行支付的示例代码
2017/08/16 PHP
JS查看对象功能代码
2008/04/25 Javascript
新老版本juqery获取radio对象的方法
2010/03/01 Javascript
在jquery中的ajax方法怎样通过JSONP进行远程调用
2014/04/04 Javascript
使用Function.apply()的参数数组化来提高 JavaScript程序性能的技巧
2015/12/23 Javascript
正则表达式基本语法及表单验证操作详解【基于JS】
2017/04/07 Javascript
JS触摸事件、手势事件详解
2017/05/04 Javascript
JS基于Location实现访问Url、重定向及刷新页面的方法分析
2018/12/03 Javascript
jQuery实现的模仿雨滴下落动画效果
2018/12/11 jQuery
基于vue实现一个禅道主页拖拽效果
2019/05/27 Javascript
小程序简单两栏瀑布流效果的实现
2019/12/18 Javascript
如何封装Vue Element的table表格组件
2021/02/06 Vue.js
[02:12]打造更好的电竞完美世界：完美盛典回顾篇
2018/12/19 DOTA
Python模拟登录12306的方法
2014/12/30 Python
Python基于回溯法子集树模板解决全排列问题示例
2017/09/07 Python
50行Python代码实现人脸检测功能
2018/01/23 Python
Python基于多线程实现抓取数据存入数据库的方法
2018/06/22 Python
python os.listdir按文件存取时间顺序列出目录的实例
2018/10/21 Python
numpy 对矩阵中Nan的处理:采用平均值的方法
2018/10/30 Python
Python实现平行坐标图的两种方法小结
2019/07/04 Python
基于python实现的百度音乐下载器python pyqt改进版(附代码)
2019/08/05 Python
python对Excel的读取的示例代码
2020/02/14 Python
Python3中的f-Strings增强版字符串格式化方法
2020/03/04 Python
eBay比利时购物网站：eBay.be
2019/08/09 全球购物
莫斯科购买书籍网站：Book24
2020/01/12 全球购物
医生实习工作总结的自我评价
2013/09/27 职场文书
《天游峰的扫路人》教学反思
2014/04/25 职场文书
党校党性分析材料
2014/12/19 职场文书
高一军训决心书
2015/02/05 职场文书
围城读书笔记
2015/06/26 职场文书
nginx作grpc的反向代理踩坑总结
2021/07/07 Servers