类似携程,飞猪机票列表滚动的日期带价格

近期在优化我们公司的机票查询的价格日历(跟携程,飞猪的机票列表类似),之前是将所有切换的日期全部展示在网页中,由于默认查询日期是一年,会导致页面上存在大量的<li>,假如哪天产品要求日期默认是10年呢,估计页面要卡死了.

优化结果先看下最终的效果图:

可以看到以下两点:
1.不管怎么滚动,下面的<li>数量永远是固定的,不会随着滚动日期的增加而累加<li>的数量,大大提高了页面的性能
2.点击了日期后,请求当天的价格,不替换<li>的情况下将"查看价格"赋值为具体的金额

技术支持:
对日期的处理主要使用的是moment.js

好了话不多说,上代码:

首先对日期做处理,设置了初始日期和截止日期,会返回这两个日期之间所有的日期,另外还会补齐已经过期的时间,和不可选择的时间,如果用户设置了当前日期,也会有标识出来,具体代码如下(下面代码要使用moment.js):

// 只负责处理日期,不负责处理业务
/*返回某时间段的所有日期数据，并格式化，并根据是否今天还是明天还是后天加了classname*/
var dateJson = []function Calendar() {this.settings = {startDate: '2019-05-10', // 开始时间endDate: '2019-10-15',// 结束时间dateJson: dateJson, // 日期上的标识数据，class名字要和这个标识字段一摸一样，例如json里面的“折”是discount,那么css名字也叫.discountdefaultSelectDate: ['2019-07-02', '2019-07-09'] // 选中的日期}
}Calendar.prototype.init = function (opt) {$.extend(this.settings, opt);return (this.getAllDate(this.settings.startDate, this.settings.endDate));
}Calendar.prototype.pushTag = function (yearMonthDay) {var tags = {};for (var i = 0; i < this.settings.dateJson.length; i++) {if (moment(yearMonthDay).format('x') === moment(this.settings.dateJson[i].date).format('x')) {for (var key in this.settings.dateJson[i]) {tags[key] = this.settings.dateJson[i][key];}break;}}return tags;
}
Calendar.prototype.setClass = function (start, end, i) { //根据日期给div设置样式var className = '',daytype='';if (i >= moment(start).format('x') && i <= moment(end)) { // 是否在开始和结束之间className = 's_day';daytype='s_day';if (moment(i).format('YYYY/MM/DD') === moment().format('YYYY/MM/DD')) { // 今天className += ' s_today';}$.each(this.settings.defaultSelectDate, function (index, item) { // defaultSelectDateif (moment(i).format('YYYY/MM/DD') === moment(item).format('YYYY/MM/DD')) {className += ' s_curday';}})} else {className = 's_pass';daytype='s_pass';if (moment(i).format('YYYY/MM/DD') === moment().format('YYYY/MM/DD')) {className += ' s_today';}}return {className:className,daytype:daytype};
}Calendar.prototype.getAllDate = function (start, end) { // 获取两个日期间的所有日期数据var sd = Number(moment(start).startOf('month').format('x')); // 本月第一天var ed = Number(moment(end).endOf('month').format('x')); // 本月最后一天var dataObject = {};dataObject[sd] = {title: moment(start).format('YYYY年MM月'), date: []} // 初始第一个月// console.log( moment(sd).weekday())for (var w = 0; w < moment(sd).weekday(); w++) { // 对本月一号之前的周几补全。dataObject[sd].date.push({year: '', month: '', day: '', week: w});// 如果当前月份没有存储当前天数用的数组,就创建一个空数组，如果有，就向里面添加一个空对象; (空对象是用来占位置的，用来填充月份前面的空白)}for (var i = sd; i <= ed;) {var firstDay = Number(moment(i).startOf('month').format('x')); // 当月第一天;--作为每个月的唯一标示if (moment(i).format('x') === moment(moment(i).startOf('month').format('YYYY-MM-DD')).format('x') && i !== sd) { // 如果是当月的第一天,添加下个月的数据//   console.log(i, sd)var op = {title: moment(i).add(1, 'days').format('YYYY年MM月'), // 下个月的第一天date: []}for (var w = 0; w < moment(i).weekday(); w++) { // 对本月一号之前的周几补全。op.date.push({year: '', month: '', day: '', week: w});// 如果当前月份没有存储当前天数用的数组,就创建一个空数组，如果有，就向里面添加一个空对象; (空对象是用来占位置的，用来填充月份前面的空白)}dataObject[i] = op;}//根据日期给div设置样式var className = this.setClass(start, end, i).className;var daytype = this.setClass(start, end, i).daytype;var tag = this.pushTag(moment(i).format('YYYY/MM/DD')); // 折扣，休息等信息var option = {year: moment(i).format('YYYY'),month: moment(i).format('MM'),day: moment(i).format('DD'),week: moment(i).weekday(),classname: className,daytype: daytype,tags: tag,date: moment(i).format('YYYY/MM/DD')}dataObject[firstDay].date.push(option);i = Number(moment(i).add(1, 'days').format('x')); // 下次赋值}return dataObject;
}

运行下面这段代码试试:

var c1 = new Calendar();var priceData = [{date: '2019-02-11', price: '100'},{date: '2019-02-12', price: '100', rest: '休'},{date: '2019-02-13', price: '100', discount: '折'}]
console.log(c1.init({startDate: '2019-02-06',endDate: '2019-04-22',defaultSelectDate: ['2019-02-09'],dateJson: priceData}))

结果:
1.默认是从周日开始排,2019-02-06是周五,所以前面会加5个空的年月日,
2.设置的初始日期是2019-02-06,所以2019-02-06之前和2019-04-22之后的日期都会加上s_pass的classname标识不可用日期,用以区分样式的,在2019-02-06到2019-04-22之前的日期,则都会加上s_day,表示可用日期,当前日期2019-02-09会加上s_curday
3.如果有json数据,tags里面会会带上来,展示大页面上的时候可以根据tags里面的key设置不同的样式

得到了日期数据,接下来就是滚动的代码:

// 只负责滚动的逻辑,不负责业务
function setLodaDateSwrap() {this.CalendarBox = null;this.leftNum = null;this.rightNum = null;this.settings = {step:2, // 暂时没用fTime:3, // 暂时没用Calendar: 'ul',prev: '.last-month',next: '.next-month',prevClick:function(){},nextClick:function(){},}
}
setLodaDateSwrap.prototype.init = function (obj, opt) {$.extend(this.settings, opt);var This = this;this.CalendarBox = obj;this.leftNum = -$(this.settings.Calendar).width() / 2;// this.leftNum = -this.settings.step*$(this.settings.Calendar).find('.dayprice').width();this.rightNum = 0;var prevStr = this.CalendarBox + ' ' + this.settings.prev;var nextStr = this.CalendarBox + ' ' + this.settings.next;$(document).on('click', prevStr, function () {if($(This.settings.Calendar).is(":animated")){return;}var callbackFn = null;// 返回布尔值,用来判断前进后退按钮是否禁用var scroolBool = This.settings.prevClick(function(callback){callbackFn = callback;});if(!scroolBool){return;}This.swrap(This.leftNum, This.rightNum,function(){if(callbackFn){callbackFn()}});This.scroolPrevBool = scroolBool;});$(document).on('click', nextStr, function () {if($(This.settings.Calendar).is(":animated")){return;}var callbackFn = null;var scroolBool = This.settings.nextClick(function(callback){callbackFn = callback;});if(!scroolBool){return;}This.swrap(This.rightNum, This.leftNum,function(){if(callbackFn){callbackFn()}});});
}
setLodaDateSwrap.prototype.swrap = function (num1, num2,callback) {var This = this;if (!$(this.settings.Calendar).is(':animated')) {$(this.settings.Calendar).css({ left: num1 });$(this.settings.Calendar).stop().animate({ left: num2 }, 500, function () {$(This.settings.Calendar).css({ left: 0 });if(callback){callback()}});}
}

滚动的功能做好了,然后就是滚动和日期结合由于涉及到html+css,代码较多,就不一一帖过来了,完整代码请戳https://github.com/slailcp/DatePriceScroll

像这种日期和滚动分开的好处还是很多的,例如下面这种日历形式的也可以做出来,:

类似携程,飞猪机票列表滚动的日期带价格相关推荐

v-inline-date,类似携程,飞猪,带价格的时间选择
v-inline-date 安装源码使用设置可选则的时间范围设置已经选择的时间选择单个时间还是时间区间单个时间时间区间时间添加标签事件selectDate 注意, 说明 exampl ...
解析春运玄学：携程飞猪去哪儿们的抢票加速包，到底灵不灵？
作者 | 鸿键本文经授权转载自深响(ID:deep-echo) 今天,你抢票了吗? 随着春运将至,买票难这个老问题准时回归,熟悉的"火车票太难抢,需要你助我一臂之力"链接又一次集 ...
意大利归还中国文物；翟天临咪蒙成考公务员题目；携程回应五一机票涨价；腾讯未成年人网络保护体系上线；这就是今天的大新闻...
今天是3月25日农历二月十九今天星期一整个周末都贡献给都挺好了下面是今天的大新闻意大利归还796件中国文物 (新京报)3月23日,在中国主席和意大利总理孔特共同见证下,中意双方代表交换关于7 ...
携程手机版机票数据添加代理
目录携程手机版国内机票数据携程手机版国际机票数据携程网页版国内机票数据携程网页版国际机票数据去哪儿网手机版机票数据去哪儿网网页版机票数据携程手机版机票数据添加代理去哪儿网网页版机票数据 ...
第1期-通过携程爬取机票价格
首先我们先找到携程机票的地址携程机票的地址为,https://flights.ctrip.com/online/list/oneway-{a}-{b}?depdate={c} 其中,a为起始地,b为 ...
android 仿携程选择城市,类似携程商旅的城市选择器 CityPicker
软件介绍 CityPicker 这是一个类似于携程商旅类型的城市选择器特性 1.无侵入性 2.使用方便展示使用方法 1.将工程中CityPicker中的Citypicker文件夹拖入你要使用的工 ...
旅游O2O“三国杀”竞技：携程系「守」、飞猪「望」、美团「攻」
(图片来源于网络) 文 | 易不二来源 | 螳螂财经随着我国经济社会发展.居民收入增加和消费升级,我国居民的旅游消费能力和旅游消费群体都在大幅度增长.据Analysys监测数据,2017年中国在线 ...
tkmybatis 子查询_日均20亿流量：携程机票查询系统的架构升级
携程机票查询系统,日均20亿流量,且要求高吞吐,低延迟的架构设计.于是,提升缓存的效率以及实时计算模块长尾延迟,成为制约机票查询系统性能的关键.本文是携程集团机票业务技术总监宋涛在「云加社区沙龙onl ...
五一四天假公布后携程机票大涨价官方如此回应
[TechWeb]3月23日消息,五一四天假期的消息一出,很多网友反映,机票价格飞涨,携程董事局主席梁建章今日在接受央视财经采访时对此作出解释,他表示,这其实和携程没有关系,携程不参与机票定价,是航空 ...
python 携程_请教两个关于使用 python 爬去哪儿，携程等机票网站的问题
初学 python . 近期公司由于业务原因,需要想办法获取到携程与去哪儿的机票信息. 于是我尝试用 python+urllib 对这两个网站上的信息进行抓取. 去哪儿的爬虫代码如下:(初学 pyth ...

类似携程,飞猪机票列表滚动的日期带价格

类似携程,飞猪机票列表滚动的日期带价格相关推荐

最新文章

热门文章