找回密码
 立即注册

QQ登录

只需一步,快速开始

[Demo源码] 微信小程序日历打卡项目下载,轻巧好用的日历打卡组件

  [复制链接]
查看: 767|回复: 210
最佳答案
0 

1

主题

1

帖子

40

积分

新人求带

积分
40
微信小程序日历打卡项目下载,轻巧好用的日历打卡组件
恍恍惚惚开发小程序也有一段时间了,最近要做一个关于打卡的小程序,最终还是翻遍全网,依然找不到一款比较随眼缘的日历打卡的相关组件,所以,老样子,自己开发一个呗。(葡京赌场网站比较简单,只是提供一个思路,样式可以自己去样式表修改,如果有需要,文章留言,如果多的话,我会加上换肤,样式自定义等扩展功能,有需求,就留言吧,谢谢大家了,如果有错误,请您一定告诉我)

先来看看什么样子
68747470733a2f2f75706c6f61642d696d616765732e6a69616e7368752e696f2f75706c6f61645f.gif

一、主要功能

1.日期选择 “看第一预览图”
2.日期切换
68747470733a2f2f75706c6f61642d696d616765732e6a69616e7368752e696f2f75706c6f61645f.gif

3.月份切换
68747470733a2f2f75706c6f61642d696d616765732e6a69616e7368752e696f2f75706c6f61645f.gif

4.回到今天
看第一预览图

5.记录选中
68747470733a2f2f75706c6f61642d696d616765732e6a69616e7368752e696f2f75706c6f61645f.png

二、使用

葡京赌场网站结构
将下载下来的文件 wx-calendar.rar 解压放到 components 文件夹下 image.png

引入葡京赌场网站
打开pages/xxx/xxx.json xxx 为你需要引入的文件名 ,已xxx = index 为例
  1. // pages/index/index.js
  2. {
  3.   "usingComponents": {
  4.     "calendar": "/components/calendar/calendar"
  5.   }
  6. }
  7. 使用葡京赌场网站 打开pages/xxx/xxx.wxml xxx 为你需要引入的文件名 ,已xxx = index 为例
  8. // pages/index/index.wxml
  9. <!--
  10. * 日历选择组件
  11. * selected [Arrey] 那些日期被选中
  12. * bindselect [function] 日历是否被打开
  13. * bindgetdate [function] 当前选择的日期
  14. * is-open [Boolean} 是否开启插入模式
  15.   -->
  16. <!-- <view class='other'>我是其他元素</view> -->
  17. <calendar selected="{{selected}}" bindselect="bindselect" bindgetdate="bindgetdate" />
  18. // pages/index/index.js
  19. Page({

  20.   /**
  21.    * 页面的初始数据
  22.    */
  23.   data: {
  24.     selected: [
  25.       {
  26.         date: '2018-5-21'
  27.       }, {
  28.         date: '2018-5-22'
  29.       },{
  30.         date: '2018-5-24'
  31.       },{
  32.         date: '2018-5-25'
  33.       }
  34.     ]
  35.   },

  36.   /**
  37.    * 生命周期函数--监听页面加载
  38.    */
  39.   onLoad: function (options) { },
  40.   /**
  41.   * 日历是否被打开
  42.   */
  43.   bindselect(e) {
  44.     console.log(e.detail.ischeck)
  45.   },
  46.   /**
  47.    * 获取选择日期
  48.    */
  49.   bindgetdate(e) {
  50.     let time = e.detail;
  51.     console.log(time)

  52.   }
  53. })
复制葡京赌场网站

521232841.png

其他参考:
微信小程序日历插件源码下载,包含详细接口说明文档
微信小程序开发的日历组件,用swiper实现,可左右滑动选择
微信小程序,日历,可作为插件使用
游客,如果您要查看本帖隐藏内容请回复

回复

使用道具 举报

最佳答案
0 

3

主题

3063

帖子

2429

积分

专家路上

积分
2429
发表于 2018-5-22 01:48:19 | 显示全部楼层
回复 支持 反对

使用道具 举报

最佳答案
0 

3

主题

3063

帖子

2429

积分

专家路上

积分
2429
发表于 2018-5-22 01:48:19 | 显示全部楼层
回复 支持 反对

使用道具 举报

最佳答案
0 

3

主题

3063

帖子

2429

积分

专家路上

积分
2429
发表于 2018-5-22 01:48:19 | 显示全部楼层
回复 支持 反对

使用道具 举报

最佳答案
0 

3

主题

3063

帖子

2429

积分

专家路上

积分
2429
发表于 2018-5-22 01:48:19 | 显示全部楼层
回复 支持 反对

使用道具 举报

最佳答案
0 

3

主题

3063

帖子

2429

积分

专家路上

积分
2429
发表于 2018-5-22 01:48:19 | 显示全部楼层
回复 支持 反对

使用道具 举报

最佳答案
0 

3

主题

3063

帖子

2429

积分

专家路上

积分
2429
发表于 2018-5-22 01:48:20 | 显示全部楼层
回复 支持 反对

使用道具 举报

最佳答案
0 

3

主题

3063

帖子

2429

积分

专家路上

积分
2429
发表于 2018-5-22 01:48:20 | 显示全部楼层
回复 支持 反对

使用道具 举报

最佳答案
0 

3

主题

3063

帖子

2429

积分

专家路上

积分
2429
发表于 2018-5-22 01:48:20 | 显示全部楼层
回复 支持 反对

使用道具 举报

最佳答案
0 

3

主题

3063

帖子

2429

积分

专家路上

积分
2429
发表于 2018-5-22 01:48:20 | 显示全部楼层
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则



www.mainetimberworks.com—微信开发者的分享交流平台,专注微信开发生态。

天津市滨海新区
中新生态城中成大道生态建设公寓9号楼3层301

微信葡京娱乐网址号

市场合作
[email protected]