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

最新推荐文章于 2024-05-23 09:29:57 发布

小小黑007

最新推荐文章于 2024-05-23 09:29:57 发布

阅读量476

点赞数

分类专栏： uni-app 文章标签：数据结构 uni-app javascript

本文链接：https://blog.csdn.net/heavenz19/article/details/128969638

版权

uni-app 专栏收录该内容

19 篇文章 4 订阅

订阅专栏

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

在这里插入图片描述
时间数据结构：

组件：

<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.time}}
				</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.time}}
				</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 {
				//time 为时间的字段
				timeAllE: [], //结束时间数组 
				preTimeS: '', //开始时间的 前一个
				nextTimeS: '', //开始时间的 后一个
				preTimeE: '', //结束时间的 前一个
				nextTimeE: '', //结束时间的 后一个

			}
		},
		props: {
			timeAllS: [Array],//传递时间数据
			
		},
		mounted() {
			// this.getTime();
		},
		methods: {
			getimeChose() {
				this.getTime();
				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].time;
				this.nextTimeE = this.timeAllE[1].time;
			},

			// 获取具体选中哪个 tag 1:开始时间 2:结束时间 
			// (判断开始时间 结束时间在整体提交的时候判断)
			selActive(e, tag) {
				let idx = e.detail.current,
					timeAllS = this.timeAllS,
					timeAllE = this.timeAllE;

				if (tag == 1) { //开始时间 的前后时间值			
					idx > 0 ? this.preTimeS = timeAllS[idx - 1].time : this.preTimeS = '';
					timeAllS.length != idx + 1 ? this.nextTimeS = timeAllS[idx + 1].time : this.nextTimeS = '';
				} else { //结束时间 的前后时间值
					idx > 0 ? this.preTimeE = timeAllE[idx - 1].time : this.preTimeE = '';
					timeAllE.length != idx + 1 ? this.nextTimeE = timeAllE[idx + 1].time : 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>

onLoad(options) {		
	setTimeout(() => {
		this.getTimez();
	}, 1000)		
},
methods: {
	// 获取选中的开始时间和结束时间 tag=1
	selActive(e) {
		let idx = e.idx;
		e.tag == 1 ? this.starTime = this.timeAllS[idx].time : this.endTime = this.timeAllS[idx + 1].time;
		this.choseTime = {
			starTime: this.timeAllS[idx],
			endTime: this.timeAllS[idx + 1]
		}
		this.time = this.starTime + '~' + this.endTime;
	},
	// 获取一进入页面后选中的时间 tag=1
	getTimez() {
		let t = this.$refs.swiperTime.getimeChose();
		this.choseTime = t;
		this.starTime = t.starTime.time;
		this.endTime = t.endTime.time;
		this.time = this.starTime + '~' + this.endTime;
	},
}