pp电子

登录
免费开通

小程序下订单日历插件,, ,类似携程等旅馆订房小程序

  小程序下订单日历插件,,,类似携程等旅馆订房小程序

小程序下订单日历插件在生涯中很常见,, ,用的最多的就是旅馆订房间小程序,, ,那么怎样实现呢?????

小程序下订单日历插件,,,类似携程等旅馆订房小程序

  这个插件分为上下两部分,, ,上边是tab栏,, ,会凭证目今的日期自动定位到目今,, ,并展示以后7天的日期,, ,下边为内容展示,, ,随tab栏转变而转变 。。

  思绪:

  首先用new Data()时间工具初始化时间,, ,获取目今的日期,, ,用new Date(Date.UTC(year, month - 1, 1)).getDay()获取每个月的第一天是星期几 。。

  // 盘算每月第一天是星期几

  function getFirstDayOfWeek(year, month) {

  return new Date(Date.UTC(year, month - 1, 1)).getDay();

  }

  const date = new Date();

  const cur_year = date.getFullYear();

  const cur_month = date.getMonth() + 1;

  const cur_date=date.getDate();

  const weeks_ch = ['日', '一', '二', '三', '四', '五', '六'];

小程序下订单日历插件,,,类似携程等旅馆订房小程序

  使用结构函数天生数据,, ,一会用 。。

  //使用结构函数建设工具

  function calendar(date,week){

  this.date=cur_year+'-'+cur_month+'-'+date;

  if(date==cur_date){

  this.week = "今天";

  }else if(date==cur_date+1){

  this.week = "明天";

  }else{

  this.week = '星期' + week;

  }

  }

  使用for循环天生json数据:

  for(var i=1;i<=monthLength;i++){

  //当循环完一周后,, ,初始化再次循环

  if(x>6){

  x=0;

  }

  //使用结构函数建设工具

  that.data.calendar[i] = new calendar(i, [weeks_ch[x]][0])

  x++;

  }

  这里由于一周有7天,, ,以是当x>6的时间,, ,重置为0 。。

  最后展示部分源码

  var that=this;

  function getThisMonthDays(year, month) {

  return new Date(year, month, 0).getDate();

  }

  // 盘算每月第一天是星期几

  function getFirstDayOfWeek(year, month) {

  return new Date(Date.UTC(year, month - 1, 1)).getDay();

  }

  const date = new Date();

  const cur_year = date.getFullYear();

  const cur_month = date.getMonth() + 1;

  const cur_date=date.getDate();

  const weeks_ch = ['日', '一', '二', '三', '四', '五', '六'];

  //使用结构函数建设工具

  function calendar(date,week){

  this.date=cur_year+'-'+cur_month+'-'+date;

  if(date==cur_date){

  this.week = "今天";

  }else if(date==cur_date+1){

  this.week = "明天";

  }else{

  this.week = '星期' + week;

  }

  }

  //目今月份的天数

  var monthLength= getThisMonthDays(cur_year, cur_month)

  //目今月份的第一天是星期几

  var week = getFirstDayOfWeek(cur_year, cur_month)

  var x = week;

  for(var i=1;i<=monthLength;i++){

  //当循环完一周后,, ,初始化再次循环

  if(x>6){

  x=0;

  }

  //使用结构函数建设工具

  that.data.calendar[i] = new calendar(i, [weeks_ch[x]][0])

  x++;

  }

  //限制要渲染的日历数据天数为7天以内(用户体验)

  var flag = that.data.calendar.splice(cur_date, that.data.calendar.length - cur_date <= 7 ? that.data.calendar.length:7)

  that.setData({

  calendar: flag

  })

  //设置scroll-view的子容器的宽度

  that.setData({

  width: 186 * parseInt(that.data.calendar.length - cur_date <= 7 ? that.data.calendar.length : 7)

  })

小程序工具提供多类型商城/门店小程序制作,, ,可视化编辑 1秒天生5步上线 。。通过拖拽、拼接?????榻峁剐〕绦蛏坛且趁妫, ,所看即所得,, ,只需要美工就能做出细腻商城 。。

有关进一步相识小程序开发案例,, ,请前往:/miniprogramdev/ 

【本站声明】
  1、本站文章中所选用的图片及文字泉源于网络以及用户投稿,, ,由于未联系到知识产权人或未发明有关知识产权的挂号,, ,若有知识产权人并不肯意我们使用,, ,若是有侵权请连忙联系 。。
  2、本网站差池文章中所涉及的内容真实性、准确性、可靠性认真,, ,仅系客观性形貌,, ,如您需要相识该类商品/服务详细的资讯,, ,请您直接与该类商品/服务的提供者联系 。。


KESION pp电子软件

KESION pp电子软件是海内领先的在线教育软件及私域社交电商软件服务提供商,, ,恒久专注于为企业提供在线教育软件及社交电商SaaS平台解决方案 。。
公司焦点产品云开店SaaS社交电商服务平台、在线教育SaaS服务平台、教育企业数字化SaaS云平台、企微营销助手、私有化自力安排品牌网校和在线教育咨询等 。。

KESION 一直通过手艺立异,, ,提供产品和服务,, ,助力企业向数字化转型,, ,通过科技驱动商业刷新,, ,让商业变得更智慧!



▼点击进入pp电子官网相识更多



热门标签
SaaS
上/下篇
  • 小程序扫码连wifi怎样实现

  • 旅游小程序系统功效开发

换一换相关推荐
精选内容
热门精选
pp电子·模拟器(试玩游戏)官方网站 pp电子·模拟器(试玩游戏)官方网站 pp电子·模拟器(试玩游戏)官方网站
【网站地图】
小程序下订单日历插件,, ,类似携程等旅馆订房小程序 -