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

前端之家收集整理的这篇文章主要介绍了Node.js+ES6+dropload.js实现移动端下拉加载实例前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

最近要涉及微信移动端项目,所以尝试学习一些移动端的实用技能,这个demo服务由Node搭建服务、下拉加载使用插件dropload,数据渲染应用了ES6中的模板字符串。有兴趣的小伙伴可以自己尝试下。

1.Node+express -- 服务搭建

由于该demo是在服务器端实现,所以需要通过npm包引入express模块,用来搭建简易服务。

1.官网下载node,npm包管理工具会同时自动下载。

2.命令行输入:npm install express -g //安装express模块

3.在项目中新建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(名字可任意起)

代码部分 [{ "month":"3月","record":[ { "action":"充值","pay":"12546.00","balance":"3445.00","time":"2015-03-15 15:03" },.........//这里省略了部分数据 { "action":"充值","pay":"2546.00","balance":"3444.00",{ "action":"充值","pay":"3546.00","balance":"343.00",{ "action":"腾讯游戏","pay":"1846.00","balance":"344.00","time":"2015-03-15 15:03" } ] },{ "month":"4月","pay":"88888.00",..........//省略数据 { "action":"充值","pay":"99999.00","pay":"354346.00","pay":"18463242.00","time":"2015-03-15 15:03" } ] },{ "month":"5月","pay":"2323232.00","pay":"324234.00","time":"2015-03-15 15:03" } ] } ] //该文件中的数据,就是即将渲染在页面中的数据

3.HTML

<Meta charset="UTF-8"> 我的账户 <Meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">//别忘记加上移动端这个属性 //dropload.css为下拉加载样式 //wechat.css文件为自己定义样式的文件

//monthselect为刚进入页面时为该section添加样式
</ul> <ul class="forDetail"&gt; </ul> <ul class="forDetail"&gt; </ul> </section>

猜你在找的Node.js相关文章