uni |
您所在的位置:网站首页 › uniapp日历打卡 › uni |
需求:请求后端接口数据,(每个月的打卡情况),并且将数据展示在日历里面 步骤1:找到官网教程文档,实现一个静态的展示页面,https://ext.dcloud.net.cn/plugin?id=56 代码语言:javascript复制 import uniCalendar from '@/components/uni-calendar/uni-calendar.vue' export default { components: { uniCalendar }, data() { return {}; }, methods: { change(e) { console.log(e); } } };大概是这样的,如果有不懂的地方可以查看官方文档说明 ![]() 2:用于展示打开情况,我这里选择了用红色点标记,在view里面写上:selected="selected",并且在data里面定义要展示的数据 代码语言:javascript复制 import uniCalendar from '@/components/uni-calendar/uni-calendar.vue' export default { components: { uniCalendar }, data() { return { selected: [{ date: '2019-12-1' }, { date: '2019-12-3' }, { date: '2019-12-4' }, { date: '2019-12-6' }] }; }, methods: { change(e) { console.log(e); } } };这个时候,就可以看到自己想要标记的日期了,但是这些都是前端静态展示,实际项目中,需要请求接口数据,并且渲染 ![]() 3:将data()数据写在前端的模拟接口里面,前面在uni-app项目里使用node服务实现模拟接口https://cloud.tencent.com/developer/article/1554342,现在就可以派上用场了 将数据写入文件,并且运行node --inspect server.js,可以看到接口可以访问了 代码语言:javascript复制let data = { "selected": [{ "date": '2019-12-1' }, { "date": '2019-12-3' }, { "date": '2019-12-4' }, { "date": '2019-12-6' }] } module.exports = { data: data }![]() 4:写一个请求uni.request,请求接口,并且将接口返回数据赋值到自己在data里面定义的空数组中。 完整示例代码: 代码语言:javascript复制 import uniCalendar from '@/components/uni-calendar/uni-calendar.vue' export default { components: { uniCalendar }, data() { return { selected: [], }; }, onLoad() { this.getList(); }, methods: { getList() { uni.request({ url: 'http://localhost:3000/data3', success: (res) => { console.log(res.data); this.selected = res.data.selected; } }); }, change(e) { console.log(e); }, } };OK,显示成功了,撒花~ ![]() |
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |