uniapp ，vue，js日历卡片可滑动日期可点击选择可更改颜色样式

最新推荐文章于 2024-08-05 21:09:49 发布

by__csdn

最新推荐文章于 2024-08-05 21:09:49 发布

阅读量671

点赞数 5

CC 4.0 BY-SA版权

文章标签：前端 vue.js uniapp javascript 前端框架

本文链接：https://blog.youkuaiyun.com/by__csdn/article/details/138526360

效果图

日期可左右滑动无限制，当天日期纯绿色填充标识样式，点击其他日期绿色边框标识（日期颜色可在样式里面更改$am-color）

1.创建一个.vue文件

<template>
	<view :class="[fold&&'flex flex-items-center', 'wx-card mt20']">
		<view :class="[!fold&&'f32 flex flex-center pb20',fold&&'card-header']" @click="initDate">
			<view :class="[fold&&'f26 tc']">{
  
  {nowDay.year}}年</view>
			<view :class="[fold&&'flex flex-center flex-items-end']">
				<text :class="[fold&&'f70']">{
  
  {nowDay.month}}</text>
				<text :class="[fold&&'f30','pb10 ml5']">月</text>
			</view>
		</view>
		<view v-if="verticaled" class="flex flex-items-center flex-around pb10">
			<view :class="['tc w7']" v-for="item in weeks" :key="item">
				{
  
  {item}}
			</view>
		</view>
		<view class="flex-1 fit-height">
			<swiper 
			:current="tabIndex" 
			:animation="animationData" 
			:class="[fold?'swiper-week':'swiper-month','flex-1']" 
			:vertical="verticaled"
			:duration="duration" 
			@change="ontabchange" 
			@animationfinish="animationfinish" >
				<swiper-item v-for="(days,index1) in list" :key="index1">
					<template v-if="fold">
						<view class="month-wrap flex flex-items-center flex-around pt5">
							<view :class="['tc',!(item.isNow||item.isFuture)&&'graya']" v-for="item in days.weeks" :key="item.day" @click="clickTime(item)">
								<view>{
  
  {item.week}}</view>
								<view :class="[item.isNow&&'active',item.isActive&&'active','mt20 pb20',!item.isAct&&item.isAM&&'isAM',!item.isAct&&item.isPM&&'isPM',item.isAct&&'isAct']">
									<text :class="[item.isNow&&'isNowWap',item.isActive&&'isSelect']">{
  
  {item.day}}</text>
								</view>
							</view>
						</view>
					</template>
					<template v-else>
						<view class="month-wrap">
							<view v-if="!verticaled" class="flex flex-items-center flex-around">
								<view :class="['tc w7']" v-for="item in weeks" :key="item">
									{
  
  {item}}
								</view>
							</view>
							<view class="flex flex-items-center flex-wrap">
								<view :class="['tc w7',(!(item.isNow||item.isFuture)&&!verticaled||(!item.isMonth))&&'graya',item.isNow&&'active',item.isActive&&'active',!item.isAct&&item.isAM&&'isAM',!item.isAct&&item.isPM&&'isPM',item.isAct&&'isAct']" v-for="(item,index) in days.months" :key="index" @click="clickTime(item)">