这篇文章给大家分享的是有关Node.js+ES6+dropload.js如何实现移动端下拉加载的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
创新互联主要从事成都网站制作、成都做网站、外贸营销网站建设、网页设计、企业做网站、公司建网站等业务。立足成都服务顺昌,10多年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:18982081108
1、js属于一种解释性脚本语言;2、在绝大多数浏览器的支持下,js可以在多种平台下运行,拥有着跨平台特性;3、js属于一种弱类型脚本语言,对使用的数据类型未做出严格的要求,能够进行类型转换,简单又容易上手;4、js语言安全性高,只能通过浏览器实现信息浏览或动态交互,从而有效地防止数据的丢失;5、基于对象的脚本语言,js不仅可以创建对象,也能使用现有的对象。
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
我的账户 //别忘记加上移动端这个属性 //dropload.css为下拉加载样式 //wechat.css文件为自己定义样式的文件现金账户(元)
8888.88
3月//monthselect为刚进入页面时为该section添加样式 4月 5月
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: '上拉加载更多
${obj.action}${obj.pay}
余额:${obj.balance}${obj.time}
`
} else if (itemIndex == 1) {
var obj = shouyeData[1].record[6-[tabLenghtArray[itemIndex]]];
result +=`
${obj.action}${obj.pay}
余额:${obj.balance}${obj.time}
`
} else if (itemIndex == 2) {
var obj = shouyeData[2].record[6-[tabLenghtArray[itemIndex]]];
result +=`
${obj.action}${obj.pay}
余额:${obj.balance}${obj.time}
`
}
}
$('.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如何实现移动端下拉加载
网页URL:http://cdxtjz.cn/article/gciooh.html