微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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 //起服务

rush: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(名字可任意起)

rush:js;"> //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",{ "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

rush:xhtml;"> <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>

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


这篇文章主要介绍“基于nodejs的ssh2怎么实现自动化部署”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“基于nodejs...
本文小编为大家详细介绍“nodejs怎么实现目录不存在自动创建”,内容详细,步骤清晰,细节处理妥当,希望这篇“nodejs怎么实现目录不存在自动创建”文章能帮助大...
这篇“如何把nodejs数据传到前端”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这...
本文小编为大家详细介绍“nodejs如何实现定时删除文件”,内容详细,步骤清晰,细节处理妥当,希望这篇“nodejs如何实现定时删除文件”文章能帮助大家解决疑惑...
这篇文章主要讲解了“nodejs安装模块卡住不动怎么解决”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来...
今天小编给大家分享一下如何检测nodejs有没有安装成功的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文...
本篇内容主要讲解“怎么安装Node.js的旧版本”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“怎...
这篇“node中的Express框架怎么安装使用”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家...
这篇文章主要介绍“nodejs如何实现搜索引擎”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“nodejs如何实现搜索引擎...
这篇文章主要介绍“nodejs中间层如何设置”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“nodejs中间层如何设置”文...