uniapp 横向滑动日历

pages/日历.vue

<template>
	<view>
		<view class="date-choose shrink">
			<view class="data-month">{
   {
    dateMonth }}</view>
			<swiper class="date-choose-swiper" :indicator-dots="false" :current="swiperCurrent" @change="dateSwiperChange($event)">
				<block v-for="(date,index) in dateList">
					<swiper-item class="swiper-item">
						<view class="weekday">
							<block v-for="(weekday,ind) in dateListArray">
								<text class="week">{
   {
    weekday }}</text>
							</block>
						</view>
						<view class="dateday">
							<block v-for="day in date.days" :key="day.id">
								<text class="day" :id="day.id" @tap="chooseDate($event)">
									<text :class="dateCurrentStr==day.id?'active':''">{
   {
    day.day }}</text>
								</text>
							</block>
						</view>
					</swiper-item>
				</block>
			</swiper>
		</view>
	</view>
</template>

<script>

export default {
   
	data() {
   
		return {
   
			dateList: [], // 日历数据数组
			swiperCurrent: 0, // 日历轮播正处在哪个索引位置
			dateCurrent: new Date(), // 正选择的当前日期
			dateCurrentStr: '', // 正选择日期的 id
			dateMonth: '1月', // 正显示的月份
			dateListArray: ['日', '一', '二', '三', '四', '五', '六']
		};
	},
	onLoad() {
   
		var that = this;
		this.initDate(); // 日历组件程序
	},
	methods: {
   
		// 日历部分
		// ----------------------------
		initDate