首页
所有分类
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 相关文章推荐
Jquery中getJSON在asp.net中的使用说明
Mar 10 Javascript
jQuery实现隔行背景色变色
Nov 24 Javascript
javascript文件加载管理简单实现方法
Jul 25 Javascript
微信小程序 css使用技巧总结
Jan 09 Javascript
详解如何使用webpack打包Vue工程
May 27 Javascript
解决vue2.0 element-ui中el-upload的before-upload方法返回false时submit()不生效问题
Aug 24 Javascript
详解使用webpack+electron+reactJs开发windows桌面应用
Feb 01 Javascript
Vue CLI3.0中使用jQuery和Bootstrap的方法
Feb 28 jQuery
Layui实现带查询条件的分页
Jul 27 Javascript
layui 点击重置按钮, select 并没有被重置的解决方法
Sep 03 Javascript
浅谈在vue-cli3项目中解决动态引入图片img404的问题
Aug 04 Javascript
微信小程序APP的生命周期及页面的生命周期
Apr 19 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
IDEA(2) 安卓(1) Spring Boot(5) OpenLayer(1) 移动开发(2) 多维数组(1) 嵌套(1) 多线程(6) Sqlite(2) android studio(3)
You might like
总结PHP中数值计算的注意事项
2016/08/14 PHP
关于php支持的协议与封装协议总结（推荐）
2017/11/17 PHP
脚本吧 - 幻宇工作室用到js,超强推荐share.js
2006/12/23 Javascript
基于jquery的跨域调用文件
2010/11/19 Javascript
javascript学习(二)javascript常见问题总结
2013/01/02 Javascript
JavaScript实现从数组中选出和等于固定值的n个数
2014/09/03 Javascript
一个JavaScript防止表单重复提交的实例
2014/10/21 Javascript
JavaScript模拟深蓝vs卡斯帕罗夫的国际象棋对局示例
2015/04/22 Javascript
AngularJS 异步解决实现方法
2017/06/12 Javascript
浅谈angular.js跨域post解决方案
2017/08/30 Javascript
Nodejs调用WebService的示例代码
2017/09/29 NodeJs
小程序中设置缓存过期的实现方法
2020/01/14 Javascript
JS实现transform实现扇子效果
2020/01/17 Javascript
浅谈JavaScript中this的指向问题
2020/07/28 Javascript
在Linux系统上部署Apache+Python+Django+MySQL环境
2015/12/24 Python
python生成器表达式和列表解析
2016/03/10 Python
利用python 更新ssh 远程代码 操作远程服务器的实现代码
2018/02/08 Python
Python根据已知邻接矩阵绘制无向图操作示例
2018/06/23 Python
对Python定时任务的启动和停止方法详解
2019/02/19 Python
python实现字符串加密 生成唯一固定长度字符串
2019/03/22 Python
详解python 模拟豆瓣登录（豆瓣6.0）
2019/04/18 Python
Python Selenium自动化获取页面信息的方法
2020/08/31 Python
Pytho爬虫中Requests设置请求头Headers的方法
2020/09/22 Python
C语言笔试集
2012/07/24 面试题
网络工程系信息安全技术专业大学生求职信
2013/10/22 职场文书
优秀员工评语
2014/02/10 职场文书
《愚公移山》教学反思
2014/02/20 职场文书
中学校庆方案
2014/03/17 职场文书
《乡下孩子》教学反思
2014/04/17 职场文书
推荐信模板
2014/05/09 职场文书
2015年话务员工作总结
2015/04/29 职场文书
大学生团日活动总结
2015/05/06 职场文书
python xlwt模块的使用解析
2021/04/13 Python
教你利用Selenium+python自动化来解决pip使用异常
2021/05/20 Python
Python 如何解决稀疏矩阵运算
2021/05/26 Python
Mysql数据库命令大全
2021/05/26 MySQL