匆忙过去了一个月的时间. 华商的 App 及 web 项目终于基本做好了, 闲来做个笔记小结一下.
一, Ajax 传数据及模板总结
(为了便于后台人员的开发, 写的网页不再是停留在静态页面层次了, 而是需要写 JSON 模板, 通过 tomcat 以及后台服务器, 演示数据调用结果.)
二, 关于 swiper 插件的上下手势滑动的判断
1. 以往, 通过 JS 动态给页面中添加一个 div 层或者还有嵌套的几层 div, 通常会用如下这样的形式:
- result+=[
- "<div class=\"boxlist\">"
- + "<div class=\"boxlisttext\"> 标题:<b>"+array.name+"<b></div>"
- +"<div class=\"boxlisttext\"> 链接:<b>+array.url+"<b></div>" +"</div>" ].join(" ");
可是在 = 在写一些斜杠的时候容易出现问题.
现在写一些动态添加的模板会使用另一个方法: 先引入 [color=Red] jsrender.min.JS[/color], 然后在页面中写一个模板和 JSON 数据, 例如
- <!---- 模板 --->
- <script type="text/x-jsrender" id="[color=Red]adddata-template[/color]">// 这里的 id 是自己定义的, 需要与后面的传入数据容器名称对应即可
- <div class="swiper-slide">
- <div class="list" onclick="Windows.location.href='detail.html'">
- <div class="lefttext">
- <h1>[color=Red]{{>title}}[/color]</h1> // 这里传入的是参数模型, 用两个双括号加一个大于号加参数表示
- <p>[color=Red]{{>wordcnt}}[/color]</p>
- </div>
- <div class="rightpic"><img src=[color=Red]{{>url}}[/color]></div>
- </div>
- </div>
- </script>
- <!----JSON 数据 --->
- // 定义 JSON 数据, 假设这个 JSON 给它命名为 [color=Red]dynamic.JSON[/color], 这样写后, 后台人员自然就知道怎么建表了.
- var dataInt={
- "pics":[
- {
- "title": "全部刷新的标题 1",
- "src": "images/banner_b.jpg"
- },
- {
- "title": "全部刷新的标题 1",
- "src": "images/banner_a.jpg"
- }
- ],
- "datas" :
- [
- {
- "title": "全部刷新的标题 1",
- "wordcnt": "全部刷新的文字内容",
- "url": "images/pic_a.jpg"
- },
- {
- "title": "全部刷新的标题 2",
- "wordcnt": "全部刷新的文字内容",
- "url": "images/pic_a.jpg"
- },
- {
- "title": "全部刷新的标题 3",
- "wordcnt": "全部刷新的文字内容",
- "url": "images/pic_a.jpg"
- }
- ],
- 'items':[
- {
- "title": "尾部新增的标题 1",
- "wordcnt": "尾部新增的文字内容",
- "url": "images/pic_b.jpg"
- },
- {
- "title": "尾部新增的标题 2",
- "wordcnt": "尾部新增的文字内容",
- "url": "images/pic_b.jpg"
- },
- {
- "title": "尾部新增的标题 3",
- "wordcnt": "尾部新增的文字内容",
- "url": "images/pic_b.jpg"
- },
- {
- "title": "尾部新增的标题 4",
- "wordcnt": "尾部新增的文字内容",
- "url": "images/pic_b.jpg"
- },
- {
- "title": "尾部新增的标题 5",
- "wordcnt": "尾部新增的文字内容",
- "url": "images/pic_b.jpg"
- },
- {
- "title": "尾部新增的标题 6",
- "wordcnt": "尾部新增的文字内容",
- "url": "images/pic_b.jpg"
- }
- ]
- }
而 Ajax 传数据可以这样写:
- $.Ajax({
- type: "POST",
- url: "JSON/[color=Red]dynamic.JSON[/color]", // 这里注意路径问题, JSON 文件的路径是以 HTML 页面作为基准的, 而不是以当前这个 JS 文件, 这是初学时容易犯的错误
- success: function(response){ // 这里的 response 参数作为 Ajax 请求成功后传回来的数据
- /************* 加载数据 ********************************/
- $.each(response.links,function(index,value){// 循环遍历
- var HTML=$('[color=Red]#adddata-template[/color]').render(value);
- mySwiper.appendSlide(HTML);
- })
- }
- });
2. 遇到的第二个难点是手势滑动上下的判断.
虽然可以用简单的方法判断页面是否到底不以及到顶部, 如:
- Windows.onload=function(){
- var scrollTop = $(this).scrollTop();
- var scrollHeight = $(document).height();
- var windowHeight = $(this).height();
- if(scrollTop + windowHeight == scrollHeight){
- alert("到达底部了")
- }
- else if(scrollTop==0){
- alert('滑到页面顶部')
- }
- }
问题是这样的体验相对于原生 JS 的那种手势滑动, 有一个橡皮筋的那种拉动回弹效果就没有了.
于是决定借用 swiper 插件了, 这个插件还是很不错的!
首先按照官网示例上的写法写好 HTML 页面结构后, 一定不要忘了页面中与 swiper-wrapper 平级的 <div class="swiper-scrollbar"></div > 不能缺少.
然后 JS 写法上, 例如:
- var mySwiper = new Swiper('.all-container', {
- scrollbar: '.swiper-scrollbar',
- direction: 'vertical',
- slidesPerView: 'auto',
- mousewheelControl: true,
- freeMode: true,
- onTouchEnd: function(swiper){
- if(swiper.translate>60){ // 判断下拉刷新
- $('.uptipsgray').addClass('visible');// 下拉刷新的 div 显示
- loadNewData();// 加载更多数据
- }
- else if(swiper.translate<-40){ // 判断上拉加载新数据
- if(mySwiper.isEnd){
- //mySwiper.isEnd 这个函数用来判断时候滑动到底部, 但是不能单独的用这个来写, 还需要在外层写一个 swiper.translate<-40, 是为了需要先判断是手势是上拉还是下拉, 否则可能造成了点击页面, 还没设计到上下拉就执行里面的函数了, 这里的 40 也不 是固定的, 只是为了先判断手势方向, 再判断是否到底
- $('.tipsgray').addClass('visible');
- loadHistoryData();
- }
- }
- }
- });
以上就是关于最近项目难点的总结, 没有完整的代码, 只把关键点列了出来, 欢迎讨论, 也希望带给你们项目中一些帮助.
来源: http://www.qdfuns.com/article/16294/833647b708dc964a54d114825ef20921.html