微信小程序日历签到功能

最新推荐文章于 2024-11-26 14:02:35 发布

置顶

若我君临天下

最新推荐文章于 2024-11-26 14:02:35 发布

阅读量4.1k

点赞数 3

分类专栏：小程序文章标签： javascript css3 html

本文链接：https://blog.youkuaiyun.com/WangYi0118/article/details/106213110

版权

在这里插入图片描述

<!--pages/signin/signin.wxml-->
<view class="contant">
	<!-- 日历年月 -->
	<view class='calendar_title layer_center'>
		<view class='icon' bindtap='lastMonth'>
			<image src='/image/arrow_left.png' />
		</view>
		<view class="nowDtae font60">{
   {
   year}}年{
   {
   month}}月</view>
		<view class='icon' bindtap='nextMonth'>
			<image src='/image/arrow_right.png' />
		</view>
	</view>
	<!-- 日历主体 -->
	<view class='calendar'>
		<view class='header'>
			<view wx:for='{
   {date}}' wx:key='index' class='{
   {(index == todayIndex) && isTodayWeek ? "weekMark" : ""}} '>{
   {
   item}}
				<view></view>
			</view>
		</view>
		<view class='date-box'>
			<block wx:for='{
   {dateArr}}' wx:key='index'>
				<view class='{
   {item.choose?"nowsDay":isToday == item.isToday ? "nowDay":""}}'>
					<view class='date-head font28' data-year='{
   {year}}' data-month='{
   {month}}' data-datenum='{
   {item.dateNum}}'>
						<view>{
   {
   item.dateNum}}</view>
					</view>
				</view>
			</block>
		</view>
	</view>
</view>
<view class="center flex_center" bindtap="signIn" wx:if="{
   {signinNow == false}}">
	<view class="avatarUrl">
		<image src="/image/clock.png"></image>
	</view>
	<view class="center_text font32">立即签到</view>
</view>
<view class="center flex_center" bindtap="alreadySign" wx:else>
	<view class="avatarUrl">
		<image src="/image/clock.png"></image>
	</view>
	<view class="center_text center_texts font32">立即签到</view>
</view>
<view class="bottom flex_center">
	<view class="bottom_text font36">本月累计签到<text>X</text>次</view>
	<view class="bottom_text font36">未签到<text>X</text>次</view>
</view>

/* pages/signin/signin.wxss */
/* 日历 */
.contant {
   
  background: #fff;
  padding-bottom: 30rpx;
}

.calendar_title {
   
  color: #fff;
  padding: 30rpx 0;
  box-sizing: border-box;
}

.calendar_title .icon {
   
  width: 60rpx;
  height: 60rpx;
  font-size: 0;
}

.icon image {
   
  width: 100%;
  height: 100%;
}

.nowDtae {
   
  color: #4aa0ff;
  margin: 0 20rpx;
}

/* 日历 */
.calendar {
   
  width: 100%;
  background: #4aa0ff;
  opacity: .8;
  border-radius: 20rpx;
  padding: 0 0 20rpx;
}

.header {
   
  font-size: 0;
  width: 100%;
  margin: 0 auto;
}

.header>view {
   
  display: inline-block;
  width:<

最低0.47元/天解锁文章