更新记录

1.1.0（2025-08-01） 下载此版本

无

平台兼容性

uni-app(4.76)

uni-app x(4.76)

其他

sh-calendar 日历组件

简介

sh-calendar 是一个功能丰富的 uni-app 日历组件，支持月视图和周视图的智能切换，提供流畅的滑动交互体验。

核心特性

• 双视图模式：支持月视图和周视图自由切换
• 滑动交互：支持左右滑动切换月份/周，上下滑动切换视图模式
• 状态标记：支持日期状态点显示（逾期、正常、高亮等）
• 触摸手势：响应式触摸操作，提供原生般的交互体验
• 数据绑定：支持双向数据绑定和事件监听

基础用法

<template>
  <sh-calendar 
    :value="selectedDate" 
    :dot_lists="todoList"
    @change="onDateChange"
    @onMonthSwitch="onMonthChange"
  />
</template>

<script>
export default {
  data() {
    return {
      selectedDate: '2024-01-15',
      todoList: [
        { date: '2024-01-10', status: 'task' },
        { date: '2024-01-15', status: 'overdue' }
      ]
    }
  },
  methods: {
    onDateChange(value) {
      console.log('选中日期:', value.fulldate)
    },
    onMonthChange(value) {
      console.log('月份切换:', value.year, value.month)
    }
  }
}
</script>

组件接口

Props

• value (String|Number): 当前选中日期
• dot_lists (Array): 状态点数据，支持简单格式和复杂格式

Events

• change: 日期选择变化时触发
• onMonthSwitch: 月份切换时触发

状态类型

• task: 正常任务（灰色点）
• overdue: 逾期任务（红色点）
• highlight: 高亮状态（白色点）

技术特点

• 基于 uni-app 框架，支持多端运行
• 使用 swiper 组件实现流畅的滑动效果
• 响应式设计，适配不同屏幕尺寸
• 模块化架构，易于维护和扩展