【品创智慧】赋能传统企业,助力数字化转型!
当前位置:网站首页 > 新闻资讯 > 小程序开发
大连微信小程序开发常用微信小程序下订单件插(日历)
日期:2020-10-11 13:48:02     浏览:     品创网络

最近做小程序开发,出于练手,也是工作需要,就做了个微信小程序的类似于酒店预订的日历插件。

先上图;

大连微信小程序开发常用微信小程序下订单件插(日历)

这个插件分为上下两部分,上边是tab栏,会根据当前的日期自动定位到当前,并展示以后7天的日期,下边为内容展示,随tab栏变化而变化。

思路:

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

1.// 计算每月第一天是星期几

2.function getFirstDayOfWeek(year, month) {

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

4.}

5.const date = new Date;

6.const cur_year = date.getFullYear;

7.const cur_month = date.getMonth + 1;

8.const cur_date=date.getDate;

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

利用构造函数生成数据,一会用。

1.//利用构造函数创建对象

2.function calendar(date,week){

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

4.if(date==cur_date){

5.this.week = "今天";

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

7.this.week = "明天";

8.}else{

9.this.week = '星期' + week;

10.}

11.}

使用for循环生成json数据:

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

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

3.if(x>6){

4.x=0;

5.}

6.//利用构造函数创建对象

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

8.x++;

9.}

这里因为一周有7天,所以当x>6的时候,重置为0。

最后展示部分源码

1.var that=this;

2.function getThisMonthDays(year, month) {

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

4.}

5.// 计算每月第一天是星期几

6.function getFirstDayOfWeek(year, month) {

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

8.}

9.const date = new Date;

10.const cur_year = date.getFullYear;

11.const cur_month = date.getMonth + 1;

12.const cur_date=date.getDate;

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

14.//利用构造函数创建对象

15.function calendar(date,week){

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

17.if(date==cur_date){

18.this.week = "今天";

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

20.this.week = "明天";

21.}else{

22.this.week = '星期' + week;

23.}

24.}

25.//当前月份的天数

26.var monthLength= getThisMonthDays(cur_year, cur_month)

27.//当前月份的第一天是星期几

28.var week = getFirstDayOfWeek(cur_year, cur_month)

29.var x = week;

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

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

32.if(x>6){

33.x=0;

34.}

35.//利用构造函数创建对象

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

37.x++;

38.}

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

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

41.that.setData({

42.calendar: flag

43.})

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

45.that.setData({

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

47.})

上一篇: 从不同角度分析微信小程序的价值
下一篇: 大连美容美发行业开发微信小程序有什么好处?
相关资讯
联系方式
全国统一热线: 400-077-7879
公司固话:0411-87557879/39252272
销售电话:139-9853-9835
售中客服:363555000(QQ)
售后客服:363555111(QQ)
公司地址: 大连市中山区一方国际
微信公众号
全国各地网站建设公司