## 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;
},
}