UNIAPP---- 开始时间与结束时间上下滑动选择组件（时间数据结构是一维数组）

UNIAPP---- 开始时间与结束时间上下滑动选择组件（时间数据结构是一维数组）

前言：弹窗组件 ： https://editor.csdn.net/md/?articleId=127620129
样式可以参考我之间的 ‘样式整合随意自用版’：https://editor.csdn.net/md/?articleId=127384820

*** 组件： swiperTime.vue ***

<template>
	<!-- 选择开始时间和结束时间 上下滑动框 -->
	<view class="display ">
		<view class="fontSize12 colorColor widP20 FontLeft  paddT20 marT6">
			开始时间
		</view>
		<view class="fontSize16 widP25 marL40 ">
			<view class="colorColor marB20">{{preTimeS}}</view>
			<swiper class="scroll-Y" vertical @change='selActive($event,1)'>
				<swiper-item v-for="(item,index) in timeAllS" :key="index">
					{{item}}
				</swiper-item>

			</swiper>
			<view class="colorColor marT20">{{nextTimeS}}</view>
		</view>
		<view class="fontSize16 widP25 FontRight">
			<view class="colorColor marB20">{{preTimeE}}</view>
			<swiper class="scroll-Y" vertical @change='selActive($event,2)'>
				<swiper-item v-for="(item,index) in timeAllE" :key="index">
					{{item}}
				</swiper-item>

			</swiper>
			<view class="colorColor marT20">{{nextTimeE}}</view>
		</view>
		<view class="fontSize12 colorColor widP20 FontRight marL40 paddT20 marT6 ">
			结束时间
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				timeAllE: [],
				preTimeS: '', //开始时间的 前一个
				nextTimeS: '', //开始时间的 后一个
				preTimeE: '', //结束时间的 前一个
				nextTimeE: '', //结束时间的 后一个
			
			}
		},
		props: {
			//时间数组
			timeAllS: [Array],

		},
		created() {
			this.getTime();
		},
		methods: {
			//传给父组件选中的开始时间和结束时间
			getimeChose() {
				let pars = {
					starTime: this.timeAllS[0],
					endTime: this.timeAllE[0],
				}
				return pars;
			},

			// 渲染上一个时间和下一个时间（时间数据是一维数组时）
			getTime() {
				let timeAllS = this.timeAllS;
				this.timeAllE = this.timeAllE.concat(timeAllS);
				this.timeAllE.shift(); //删除第一条数据
				this.preTimeS = '';
				this.preTimeE = '';
				this.nextTimeS = timeAllS[1];
				this.nextTimeE = this.timeAllE[1];
			},

			// 获取具体选中哪个 tag 1:开始时间 2:结束时间 
			// (判断开始时间 结束时间在整体提交的时候判断)
			selActive(e, tag) {
				let idx = e.detail.current,
					timeAllS = this.timeAllS,
					timeAllE = this.timeAllE;
				console.log('11111', e)
				if (tag == 1) { //开始时间 的前后时间值
					idx > 0 ? this.preTimeS = timeAllS[idx - 1] : this.preTimeS = '';
					timeAllS.length != idx + 1 ? this.nextTimeS = timeAllS[idx + 1] : this.nextTimeS = '';

				} else { //结束时间 的前后时间值
	
					idx > 0 ? this.preTimeE = timeAllE[idx - 1] : this.preTimeE = '';
					timeAllE.length != idx + 1 ? this.nextTimeE = timeAllE[idx + 1] : this.nextTimeE = '';

				}

				let pars = {
					tag: tag,
					idx: idx
				}
				this.$emit("selActive", pars)
			
			}
		}
	}
</script>

<style>
	.scroll-Y {
		height: 48rpx;
	}
</style>

调用组件

<swiperTime ref="swiperTime" :timeAllS='timeAllS' @selActive="selActive"></swiperTime>

<script>
	export default {
		data() {
			return {
				timeAllS: ['8:10', '8:20', '8:30', '8:40'], //时间数据
				starTime: '', //选中开始时间
				endTime: '', //选中结束时间}
			}
		},
		onLoad(options) {
			this.getTime();
		},
		methods: {
			// 获取一进入页面后选中的时间
			getTime() {
				let t = this.$refs.swiperTime.getimeChose();
				this.starTime = t.starTime;
				this.endTime = t.endTime;
			},
			
			// 获取选中的开始时间和结束时间
			selActive(e) {
				let idx = e.idx;
				e.tag == 1 ? this.starTime = this.timeAllS[idx] : this.endTime = this.timeAllS[idx + 1];
			},
			// 如果点击确认按钮
			zdBtn() {
				let starTime = this.starTime;
				let endTime = this.endTime;
				// 判断开始时间和结束时间
				if (starTime >= endTime) return this.$alert('开始时间不能大于结束时间！')
			}
			
		}