uniapp上班考勤打卡情况日历展示

需求:请求后端接口数据,(每个月的打卡情况),并且将数据展示在日历里面

步骤

1:找到官网教程文档,实现一个静态的展示页面,https://ext.dcloud.net.cn/plugin?id=56





大概是这样的,如果有不懂的地方可以查看官方文档说明


uniapp上班考勤打卡情况日历展示_第1张图片

2:用于展示打开情况,我这里选择了用红色点标记,在view里面写上:selected="selected",并且在data里面定义要展示的数据




这个时候,就可以看到自己想要标记的日期了,但是这些都是前端静态展示,实际项目中,需要请求接口数据,并且渲染


uniapp上班考勤打卡情况日历展示_第2张图片

3:将data()数据写在前端的模拟接口里面,前面在uni-app项目里使用node服务实现模拟接口https://www.jianshu.com/p/de04ec824928,现在就可以派上用场了
将数据写入文件,并且运行node --inspect server.js,可以看到接口可以访问了

let data = {
   
    "selected": [{
        "date": '2019-12-1'
    }, {
        "date": '2019-12-3'
    }, {
        "date": '2019-12-4'
    }, {
        "date": '2019-12-6'
    }]
}
module.exports = {
  data: data
}
uniapp上班考勤打卡情况日历展示_第3张图片

4:写一个请求uni.request,请求接口,并且将接口返回数据赋值到自己在data里面定义的空数组中。
完整示例代码:




OK,显示成功了,撒花~


uniapp上班考勤打卡情况日历展示_第4张图片

欢迎关注【编程微刊】公众号,回复【领取资源】,500G编程学习资源干货免费送。


uniapp上班考勤打卡情况日历展示_第5张图片

你可能感兴趣的:(uniapp上班考勤打卡情况日历展示)