Taro打卡日历组件。支持h5、ReactNative、后续支持小程序

效果图 父组件需要传的值

dateDesc:{ year:2020, //年份 month:7, //月分传人0默认为当前月份 list:[ 1,2,3,5,7,8,12,30,23,18 //默认选中的日期 ] } changeModal(){ //控制模态框的显隐 this.setState({ isShowModal:false }) } //应用日历组件 <Calendar list={dateDesc.list}></Calendar> {!!isShowModal && ( //模态框组件 <DaKaModalBox parent={this}></DaKaModalBox> )}

Calendar组件

import Taro, { Component } from '@tarojs/taro' import { View, Text,Image } from '@tarojs/components' import styles from './calendar.scss' import {getDateNum,getNewMonth,numConvCh,getNewYear,getDate} from '../../../commons/date' //申明props类型 type PropsType = { year:number, //年份 month:number, //月分传人0默认为当前月份 list:Array<number> //打过卡的日期 } //申明state类型 type StateType = { month:number, //当前的月份 weekList:Array<String>, dayNum:Array<number>, //这个月有多少天 weekday:number, //今天是星期几 0周日，1周一 } //申明接口 interface Calendar{ props:PropsType, state:StateType } class Calendar extends Component{ constructor(props:any){ super(props) this.state = { month:0, //当前的月份 weekList:["日","一","二","三","四","五","六"], dayNum:[], //这个月有多少天 weekday:0, //今天是星期几 0周日，1周一 } } static defaultProps = { //默认设置只对undefined有用 year:getNewYear(), month:getNewMonth(), list:[] } componentWillMount(){ //初始化完成 console.log(this.props) let month = numConvCh(this.props.month) //获取某个月第一天是星期几 let day = new Date(String(this.props.month) + "/1/" + String(this.props.year)).getDay() this.setState({ month:month, dayNum:this.getDayList(getDateNum(this.props.month,this.props.year)), weekday:day }) } getDayList(num:number){ let list:any[] = []; //获取某个月第一天是星期几 let day = new Date(String(this.props.month) + "/1/" + String(this.props.year)).getDay() let upDayNum = getDateNum(this.props.month == 1?12:this.props.month - 1,this.props.month == 1?this.props.year -1:this.props.year) //获取上个月有多少天 let weekDays = ['日','一','二','三','四','五','六'] for(var i = 0;i < weekDays.length;i++){ //推入星期几 list.push(weekDays[i]) } while(day > 0){ day--; list.push(upDayNum-day); } for(let i = 1;i <= num;i++){ //推入这个月的天数 list.push(i) } if(list.length%7!=0){ //补齐剩下的格子 let num = 7 - list.length%7; for(let i = 0;i<num;i++){ list.push("") } } return list } render(){ const { month:month, dayNum:dayNum, weekday:weekday } = this.state const { list:list } = this.props return( <View className={styles.calendarBox} style={styles.calendarBox}> <View className={styles.TextBox} style={styles.TextBox}> <Text className={styles.topText} style={styles.topText}>打卡日历</Text> <Text className={styles.botText} style={styles.botText}>（{month}月）</Text> </View> <View className={styles.contentBox} style={styles.contentBox}> <View className={styles.dateListBox} style={styles.dateListBox}> <View className={styles.dateList} style={styles.dateList}> { dayNum.map((item:number,index:number)=>{ return( <View className={(list.indexOf(item) > -1 && index >= weekday+7)?[styles.dateListItem,styles.hoverdateListItem]:(index<7?styles.dateListItemNone:styles.dateListItem)} style={process.env.TARO_ENV === 'rn'?(list.indexOf(item) > -1 && index >= weekday+7)?[styles.dateListItem,styles.hoverdateListItem]:(index<7?styles.dateListItemNone:styles.dateListItem):""} key={index}> <Text className={styles.dataListText} style={styles.dataListText}>{item}</Text> { (list.indexOf(item) > -1 && index >= weekday+7)?<View className={styles.IconBox} style={styles.IconBox}> <Image className={styles.iconImg} style={styles.iconImg} src={require("./../../../assets/icon/dakachenggong.png")}></Image> </View> :<View></View> } </View> ) }) } </View> </View> </View> </View> ) } } export default Calendar

Calendar组件样式

@mixin border($position, $width, $style, $color) { /* #ifndef rn */ //不知道为什么不生效 // #{border-#{$position}}: $width $style $color; /* #endif */ /*#ifndef RN*/ border: 0 $style $color; @each $d in $position { #{border-#{$d}-width}: $width; } /*#endif*/ } @mixin border2($position, $width, $style, $color) { //h5中：border: 0 $style $color会清除上一个border @each $d in $position { #{border-#{$d}-width}: $width; } } .calendarBox{ margin-top: 60px; } .TextBox{ display: flex; flex-direction: column; } .topText{ font-family: PingFangSC-Medium; font-size: 70px; color: #343434; text-align: center; line-height: 102px; } .botText{ font-family: PingFangSC-Medium; font-size: 54px; color: #161616; text-align: center; line-height: 102px; } .contentBox{ padding-left: 40px; padding-right: 38px; } .dateListBox{ width: 998px; overflow: hidden; } .dateList{ display: flex; flex-direction: row; flex-wrap: wrap; overflow: hidden; width: 1002px; margin-left: -2px; } .dateListItem{ display: flex; flex-direction: column; align-items: center; width: 140px; height: 174px; @include border(left,2px,solid,#979797); @include border2(top,2px ,solid , #979797) } .dateListItemNone{ display: flex; flex-direction: column; align-items: center; width: 140px; @include border(right,2px,solid,#fff); height: 122px; } .hoverdateListItem{ background-color: #EDFAFE; } .dataListText{ margin-top: 26px; font-family: PingFangSC-Regular; font-size: 42px; color: #ABABAB; text-align: center; } .IconBox{ display: flex; flex-direction: row; justify-content: flex-start; } .iconImg{ margin-top: 13px; width: 50px; height: 40px; }

//遮罩层组件

import Taro, { Component } from '@tarojs/taro' import { View, Text,Image } from '@tarojs/components' import styles from './daKaModalBox.scss' import ButtonBox from './../utils/buttonBox' type PropsType = { parent:Object } type StateType = { } interface DaKaModalBox{ props:PropsType } class DaKaModalBox extends Component{ constructor(props:any){ super(props) this.state = { } } isDaKa(year:number,month:number,list:Array<number>){ //判断今天有没有打卡 参数list打卡列表 if(year == getNewYear() && month == month){ //判断传入年月是否为当前月份 if(list.indexOf(getDate()) == -1){ //没有打卡的话进行打卡操作 // this. } } } render(){ return( <View className={styles.modalBox} style={styles.modalBox}> <View className={styles.modalBoxSM} style={styles.modalBoxSM}> {!!this.props && ( <Image className={styles.backImg} style={styles.backImg} src={require('./../../../assets/icon/tanchuang.png')}></Image> )} <View className={styles.modalBoxTextBox} style={styles.modalBoxTextBox}> <Text className={styles.modalBoxDKCG} style={styles.modalBoxDKCG}>打卡成功</Text> <Image className={styles.modalBoxTextDKIcon} style={styles.modalBoxTextDKIcon} src={require('./../../../assets/icon/daka2.png')}></Image> <Text className={styles.modalBoxTextDK} style={styles.modalBoxTextDK}>打卡</Text> <Text className={styles.modalBoxTextLX} style={styles.modalBoxTextLX}>您已连续打卡5天</Text> <Image className={styles.modalBoxBorder} style={styles.modalBoxBorder} src={require('../../../assets/icon/Group14Copy.png')}></Image> <View className={styles.modalBoxBtnBox} style={styles.modalBoxBtnBox}> <ButtonBox onEvent={()=>this.props.parent.changeModal()}> <Image className={styles.modalBoxBtnIcon} style={styles.modalBoxBtnIcon} src={require('./../../../assets/icon/anniu.png')}></Image> <Text className={styles.modalBoxBtn} style={styles.modalBoxBtn}>知道了</Text> </ButtonBox> </View> </View> </View> </View> ) } } export default DaKaModalBox;

遮罩层样式

.modalBox{ position: absolute; top: 0px; left: 0px; width: 1082px; height: 100%; background-color: rgba($color: #000000, $alpha: .2); display: flex; flex-direction: row; justify-content: center; z-index: 1; } .modalBoxSM{ position: relative; width: 100%; height: 100%; } .backImg{ position: absolute; width: 840px; height: 816px; top: 0; left: 0; top: 490px; left: 50%; margin-left: -406px; z-index: 1; } .modalBoxTextBox{ position: absolute; width: 840px; height: 816px; top: 0; left: 0; top: 490px; left: 50%; margin-left: -406px; z-index: 2; display: flex; flex-direction: column; align-items: center; } .modalBoxDKCG{ margin-top: 44px; margin-bottom: 28px; font-size: 84px; color: #FE890D; height: 118px; line-height: 118px; } .modalBoxTextDK{ font-size: 44px; color: #64ACFF; height: 62px; line-height: 62px; margin-top: 58px; } .modalBoxTextLX{ font-size: 60px; color: #343434; height: 84px; line-height: 84px; margin-top: 114px; } .modalBoxBorder{ width: 716px; margin-top: 96px; height: 2px; } .modalBoxTextDKIcon{ position: absolute; top: 190px; left: 294px; width: 268px; height: 144px; z-index: -1; } .modalBoxBtnBox{ width: 100%; padding-top: 54px; position: relative; text-align: center; display: flex; flex-direction: row; justify-content: center; } .modalBoxBtnIcon{ position: absolute; width: 280px; height: 100px; left: 50%; top: 50%; margin-left: -145px; margin-top: -20px; /* #ifdef rn */ //不知道为什么不生效 margin-top: -50px; /* #endif */ z-index: -1; } .modalBoxBtn{ font-size: 40px; color: #9A6A01; height: 56px; line-height: 56px; }

//ButtonBox是我自己定义的一个按钮、仅仅是为了在ReactNative使用TouchableOpacity

import Taro, { Component } from '@tarojs/taro' import { View,Text } from '@tarojs/components' import ButtonRn from './../../../reactNative/components/buttonBox' class ButtonBox extends Component<any,any>{ constructor(props:any){ super(props) this.state = { } } render(){ return( <View> {process.env.TARO_ENV === 'rn'? <ButtonRn onEvent={this.props.onEvent}> {this.props.children} </ButtonRn>: <View onClick={this.props.onEvent}> {this.props.children} </View> } </View> ) } } export default ButtonBox

ReactNative中的Button按钮：

import {TouchableOpacity} from 'react-native' import Taro, { Component } from '@tarojs/taro' import { View } from '@tarojs/components' class buttonRN extends Component<any,any>{ constructor(props:any){ super(props) this.state = { } } render(){ return( <View> <TouchableOpacity onPress={()=>this.props.onEvent()}>{this.props.children}</TouchableOpacity> </View> ) } } export default buttonRN

写的比较粗糙、有错误欢迎指出