先上效果图：
动作：向前翻一页，显示为 2016年第1周；向后翻一页，显示为 2016年第3周
动作2：日期与数据关联
html：
立即学习“前端免费学习笔记（深入）”；
.mui-segmented-control.mui-scroll-wrapper .mui-control-item{ padding:0 20px; } @media only screen and (min-width: 320px) { .mui-segmented-control.mui-scroll-wrapper .mui-control-item{ padding:0 28px; } } @media only screen and (min-width: 360px) { .mui-segmented-control.mui-scroll-wrapper .mui-control-item{ padding:0 33px; } } @media only screen and (min-width: 375px) { .mui-segmented-control.mui-scroll-wrapper .mui-control-item{ padding:0 38px; } } @media only screen and (min-width: 414px) { .mui-segmented-control.mui-scroll-wrapper .mui-control-item{ padding:0 44px; } } .ReportDiv{ width: 100%; float: left; height: 300px; margin-top: 60px; } .headerDiv { background-color: #efeff4; } 周聊天消息分析
暂无数据 mui.init(); mui('.mui-scroll-wrapper').scroll();
登录后复制
这么多代码只要看一个地方就OK了，这里有三个DIV,分别是：
previousDiv 上一页ID
登录后复制
nextDiv 下一页ID
登录后复制
headerTitleDiv 日期容器ID 日期是需要放在input里的， ID为title日期的形式是day, input的type='text'，不可以是其它，否则，title不显示日期
登录后复制
登录后复制
下面是JS的部分：
1、自定义变量
var previousDiv;var nextDiv;var headerTitleDiv;var title;//拼日期var currentWeek = theWeek();var defaultWeek = theWeek();var currentYear = theYear();var defautlYear = theYear();//监听上一页与下一页的点击事件var previousDivTapEvent;var nextDivTapEvent;
登录后复制
2、变量初始化：
$(document).ready(function(){ previousDiv = document.getElementById('previousDiv'); nextDiv = document.getElementById('nextDiv'); headerTitleDiv = document.getElementById('headerTitleDiv'); title = document.getElementById('title'); title.value = formartWeek(); //给前一页加点击事件，并监听它 previousDiv.addEventListener('tap', previousDivTapEvent); $(title).on('input', function(){ if(this.value.length == 0){ this.value.length = formartWeek(new Date()); }else{ if(checkCanDoNext()){ fetchDate(); return; } } }); }
登录后复制
3、前一天监听事件（ fetchDate(); 日期与数据关联的方法，调用这个方法，可以取得与日期关联的数据 ）：
function previousDivTapEvent(){ resetNextEvent(); nextDiv.className = 'nextImgDiv'; title.value = getPreviousWeek(title.value); //fetchDate(); 日期与数据关联的方法，调用这个方法，可以取得与日期关联的数据 fetchDate();}
登录后复制
4、下一天监听事件：
function nextDivTapEvent(){ resetPreviousEvent(); title.value = getNextWeek(); fetchDate(); if(checkCanDoNext){ nextDiv.removeEventListener('tap',nextDivTapEvent); return; }}
登录后复制
5、获取上一周，并返回
function getPreviousWeek(){ //当前周减去一周currentWeek--; currentWeek--; if(currentWeek 6、获取下一周，并返回
function getNextWeek(){ //当前周加上一周主是下一周 currentWeek ++; //如果当前周大于52周，满一年，当前年加一年，新的一年，第一周 if(currentWeek > 52){ currentYear ++; currentWeek = 1; } return formartWeek();}
登录后复制
7、判断，如果下一页有数据，则，可以点击进入下一页，如果没有数据，按钮不可点击
function checkCanDoNext(){ if(defaultWeek 8、重置上一页的监听事件，先给按钮加一个图片class;
先删除原来的事件，再加上新的事件
function resetPreviousEvent(){ previousDiv.className = 'previousImgDiv'; previousDiv.removeEventListener('tap',previousDivTapEvent); previousDiv.addEventListener('tap',previousDivTapEvent);}
登录后复制
9、重置下一页的监听事件，方法同上
function resetNextEvent(){ nextDiv.className = 'nextImgDiv'; nextDiv.removeEventListener('tap',nextDivTapEvent); nextDiv.addEventListener('tap',nextDivTapEvent);}
登录后复制
10、格式化日期，以自定义方式返回
function formartWeek(){ return currentYear + "年 第 " + currentWeek + "周";}
登录后复制
11、获取当前年份
function theYear(){ var now = new Date(); years = now.getFullYear(); return years;}
登录后复制
12、获取当前周，并判断是否为闰年，针对2月的天数进行计算
function theWeek(){ var totalDays = 0; now = new Date(); years = now.getYear() if (years 以上为周日期的方法，需要注意以下几点：
- html中input的类型为text
登录后复制
2. 前一页与后一页的点击事件中，可以加入与数据关联的方法，在点击进入下一页时，自动获取相应的数据
3. 给title添加input事件时，需要写一个判断：当前值 = 周日期的返回的方法。如果下一页有数据，才可以点击进入下一页：
$(title).on('input', function(){ if(this.value.length == 0){ this.value.length = formartWeek(new Date()); }else{ if(checkCanDoNext()){ fetchDate(); return; } } });
登录后复制
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/3115623.html
