更新记录
1.1.0(2024-10-09)
下载此版本
兼容小程序
1.0.0(2024-10-08)
下载此版本
首次发布日程显示组件,支持多日程重叠,日程颜色配置
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
HBuilderX 4.0 app-vue |
√ |
√ |
√ |
√ |
√ |
√ |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
√ |
√ |
√ |
√ |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
√ |
√ |
√ |
√ |
√ |
× |
√ |
√ |
√ |
nl-schedule
日程显示组件,用于显示每日行程的组件
基本使用
通过list
参数传入日程列表值,该值为一个数组,
title
日程标题
startHour
日程开始时间(必填)
endHour
日程结束时间(必填)
color
日程卡片颜色,16进制色号
<template>
<view class="schedule-container">
<nl-schedule :list="scheduleList" @click="handleDetail"></nl-schedule>
</view>
</template>
<script>
export default {
data() {
return {
scheduleList: [
{ id: 0, title: '日程1', startHour: '0:00', endHour: '2:00', color: '#ff0000' },
{ id: 1, title: '日程2', startHour: '0:00', endHour: '2:10', color: '#ff0000' },
{ id: 2, title: '日程3', startHour: '4:00', endHour: '5:30' },
{ id: 3, title: '日程4', startHour: '0:00', endHour: '5:30' },
{ id: 4, title: '日程5', startHour: '4:00', endHour: '5:30' },
{ id: 5, title: '日程6', startHour: '1:10', endHour: '5:50' },
{ id: 6, title: '日程7', startHour: '9:00', endHour: '10:00' },
{ id: 7, title: '日程8', startHour: '9:00', endHour: '10:00' },
{ id: 8, title: '日程9', startHour: '10:00', endHour: '11:00' },
],
}
},
methods: {
handleDetail(item) {
console.log('点击的日程:', item)
},
},
}
</script>
API
属性 |
说明 |
类型 |
默认值 |
hourHeight |
一小时的单元格高度(单位px) |
Nubmer |
50 |
hourColor |
小时的字体颜色 |
String |
'#999' |
list |
日程列表数据,见上方"基本使用"说明 |
Array |
|
事件名 |
说明 |
回调参数 |
click |
点击显示的日程 |
点击日程数据, |