vue uniapp如何实现横向滚动周历,横向滚动一周日历

当前周

下一周

html部分

<!-- 日历主体 --><view class="calendar_box"><div class="left"><image src="../../static/all_icon.png" ></image><text>全部</text></div><swiper class="cel" :current="index" circular="true" @change="change"><swiper-itemclass="cel-days"v-for="(item, index) in weeks":key="index"><view:class="d.date == currentDate ? 'day selected' : 'day'"v-for="(it, i) in item":key="i"@click="tapDate(it.date)"><div:class="it.date == selectday ? 'day_box selectday ' : 'day_box'":id="it.date == today ? 'today' : ''"><div class="item1">{{ it.week | weekfilter }}</div><div class="item2 fw" v-if="it.day == '01'">{{ it.month }}月</div><div class="item2" v-else>{{ it.day }}</div><div class="item3">1场</div><div class="spot"></div></div></view></swiper-item></swiper><div class="right" @click="goCalendar"><image src="../../static/cal_icon.png" ></image><text>日历</text></div></view>

javascript部分

<script>
import dayjs from "../../timer/dayjs.min.js";
export default {data() {return {curIndex: 0,index: 0,weeks: [],currentDate: dayjs().format("YYYY-MM-DD"),today: dayjs().format("YYYY-MM-DD"),startDate: null,endDate: null,selectday: dayjs().format("YYYY-MM-DD"),};},onShow(option) {this.init();},methods: {tapDate(date) {this.selectday = date;},// 去日历页面goCalendar() {uni.navigateTo({url: "/pages/calendar_page/calendar_page",});},change(e) {let { currentDate, index, weeks, startDate, endDate } = this;let current = e.detail.current;let aDate =current - index == -2 || current - index == 1 ? endDate : startDate;// console.log(aDate, "aDate");// console.log(current, "current");if (current == 0) {weeks = [this.getWeek(0, aDate),this.getWeek(1, aDate),this.getWeek(-1, aDate),];startDate = weeks[2][0].date;endDate = weeks[1][0].date;currentDate = weeks[0][0].date;}if (current == 1) {weeks = [this.getWeek(-1, aDate),this.getWeek(0, aDate),this.getWeek(1, aDate),];(startDate = weeks[0][0].date),(endDate = weeks[2][0].date),(currentDate = weeks[1][0].date);}if (current == 2) {weeks = [this.getWeek(1, aDate),this.getWeek(-1, aDate),this.getWeek(0, aDate),];(startDate = weeks[1][0].date),(endDate = weeks[0][0].date),(currentDate = weeks[2][0].date);}this.weeks = weeks;this.startDate = startDate;this.endDate = endDate;this.currentDate = currentDate;this.index = current;// console.log(currentDate, "currentDate");// console.log(endDate, "endDate");// console.log(startDate, "startDate");},curBtn(index) {this.curIndex = index;},init() {// 构造一个数组[[],[],[]]，里边放3个星期的数据,[0]放本周，[1]放下一周,[2]放上一周let { weeks, startDate, endDate, currentDate } = this;let firstDayOfWeek = dayjs(currentDate).subtract(3, "day");weeks = [this.getWeek(0, firstDayOfWeek),this.getWeek(1, firstDayOfWeek),this.getWeek(-1, firstDayOfWeek),];// console.log(weeks[1][6].date, "weeks[1][6].date");startDate = weeks[2][0].date;endDate = weeks[1][0].date;this.weeks = weeks;this.startDate = startDate;this.endDate = endDate;this.currentDate = firstDayOfWeek;// console.log(this.weeks, this.startDate, this.endDate);},// direction 接收 0,1,-1三个值，分别代表，本周，下周，上周getWeek(direction, date) {date = dayjs(date);// console.log(date.format("YYYY-MM-DD"), "getWeek");let firstDayOfWeek = date.subtract(date.day(), "day");// console.log(firstDayOfWeek,'firstDayOfWeek');let arr = [];for (let i = direction * 7; i < (1 + direction) * 7; i++) {let d = date.add(i, "day");// console.log(d);arr.push({date: d.format("YYYY-MM-DD"),day: d.format("DD"),week: d.day(),month: d.month() + 1,});}return arr;},},filters: {weekfilter(v) {let str = null;switch (v) {case 0:str = "周日";break;case 1:str = "周一";break;case 2:str = "周二";break;case 3:str = "周三";break;case 4:str = "周四";break;case 5:str = "周五";break;case 6:str = "周六";break;default:break;}return str;},},
};
</script>

css部分

<style>.calendar_box {display: flex;box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.2);border-radius: 4rpx;margin: 0 auto;height: 124rpx;width: 686rpx;
}
.calendar_box .center {height: 124rpx;display: flex;flex-wrap: nowrap;white-space: nowrap;display: flex;align-items: center;overflow-x: auto;width: 490rpx;
}
.day {
}
.left image,
.right image {width: 40rpx;height: 40rpx;/* margin-bottom: -4rpx; */
}
.left,
.right {display: flex;align-items: center;display: flex;width: 98rpx;/* line-height: 36rpx; */justify-content: center;background: #f3f4f6;border-radius: 0px 4rpx 4rpx 0px;flex-direction: column;font-size: 20rpx;color: #444444;
}
.left {background: #ea4336;border-radius: 4rpx 0px 0px 4rpx;color: #fff;
}
.right text {margin-top: 10rpx;
}
.cel {height: 80rpx;width: 100%;height: 124rpx;/* margin-bottom: 16rpx; */
}
.cel-days {display: flex;/* background-color: pink; */height: 100%;
}
.day {flex: 1;color: #333;/* background-color: orange; */align-items: center;text-align: center;justify-content: center;font-size: 24rpx;
}
.day_box {text-align: center;display: inline-block;height: 124rpx;position: relative;width: 100%;/* width: 98rpx; *//* border: 1rpx solid #000; */border-radius: 4rpx;border: 1rpx solid #fff;
}
.selectday {/* background-image: linear-gradient(-45deg, #3857e3, #567bfd); */border: 1rpx solid red;font-weight: bold;
}
#today {color: red;
}
.emary {width: 100%;text-align: center;margin: 32rpx auto;display: flex;align-items: center;flex-direction: column;font-size: 32rpx;font-family: PingFangSC-Regular, PingFang SC;font-weight: 400;color: #999999;line-height: 44rpx;
}
.emary image {width: 472rpx;
}
.item1,
.item3,
.item2 {font-size: 20rpx;font-family: PingFangSC-Regular, PingFang SC;font-weight: 400;/* background: #875ec3; */font-family: PingFangSC-Regular, PingFang SC;font-weight: 400;margin-top: 6rpx;overflow: hidden;
}
.item2 {/* background: #ffb827; */width: 100%;font-size: 32rpx;
}
.item3 {margin-top: 2rpx;width: 100%;
}.fw {font-weight: 600;
}
#today .spot {width: 6rpx;height: 6rpx;background-color: #ea4336;border-radius: 50%;position: absolute;left: 48%;bottom: 6rpx;
}
</style>

vue uniapp如何实现横向滚动周历,横向滚动一周日历相关推荐

小学计算机室行事周历,关于小学信息技术教案八篇
关于小学信息技术教案八篇作为一名老师,通常会被要求编写教案,教案是教学活动的总的组织纲领和行动方案.如何把教案做到重点突出呢?以下是小编整理的小学信息技术教案8篇,希望对大家有所帮助. 小学信息技术 ...
vue周历可左右滑动（带有阴历）
找了好久找到的大佬作品vue滑动展示周历日历选择器代码_小黑雷的博客-CSDN博客,在大佬的基础上做了小改进,想看的可以做一下参考哦!这个是我改进后的git地址https://gitee.com/lo ...
vue滑动展示周历日历选择器代码
分享两个周历的组件今天无意间发现的效果图,觉得很棒的扩展,下面是效果图下载地址:https://github.com/LinSky/v-weekSlider 还有一个类似的是jquery的只不过不 ...
vue uniapp 微信小程序搜索下拉框模糊搜索
vue uniapp 微信小程序搜索下拉框模糊搜索话不多说直接贴代码 template <template><view class="index"> ...
html怎么做到滚动鼠标转换,横向的网页如何实现鼠标滑轮横向移动？_html/css_WEB-ITnose...
横向的网页如何实现鼠标滑轮横向移动? 我做一个学校的点餐网页,想横向的形式,网页已经做出来了,如何实现鼠标滚轮是横向来移动滚动条的? 还有有没可能添加一个按钮,按一下制定滚动条向右移动某些个像素点?我 ...
vue实现页面点击页面滚动-禁止鼠标滑轮滚动页面
内容: 一般要求鼠标禁止滑轮滚动页面时,需要实现页面点击滚动,跌跌撞撞,走了很多弯路实现了wwwwww vue代码: // 首先在需要的滑动的页面上d的主标签加鼠标禁止事件, @touchmove.p ...
js处理时间戳为各种格式/js判断公历/农历/周历节日和节气
js获取时间 var date = new Date(); date.getYear();//获取当前年份距离1900年的年份 date.getFullYear();//获取当前年份 //date.g ...
【vue】【intersectionObserver】滚动正文时菜单滚动到对应菜单
场景需求: 左侧为菜单列表,右侧是对应菜单的内容, 所有内容可进行无缝滚动当内容滚动到对应的菜单时,菜单进行定位并显示到可视区域点击菜单时,对应内容显示到可视区域涉及知识点: intersect ...
杨镇一中2021高考成绩查询,杨镇一中高三第14周周历
原标题:杨镇一中高三第14周周历杨镇一中高三第14周重点工作: 2019年5月27日-6月2日 1.稳定常规. 2.精准帮扶. 3.智慧备考. 4.高考档案整理. 5.语文英语专家讲座. 6.高三适 ...
vue停止指令_一个微小的Vue指令，当到达边缘时停止传播滚动
vue停止指令停止滚动 (vue-scroll-stop) A tiny Vue directive that stop propagation scroll when edge reached. ...

vue uniapp如何实现横向滚动周历,横向滚动一周日历

vue uniapp如何实现横向滚动周历,横向滚动一周日历相关推荐

最新文章

热门文章