92 lines
1.8 KiB
Vue
92 lines
1.8 KiB
Vue
|
<template>
|
||
|
<view>
|
||
|
<view class="padding bg">
|
||
|
<scroll-view scroll-x="true" class="scroll-view">
|
||
|
<view class="scroll-item" v-for="(item,index) in time" :key="index" :class="tabIndex==index?'active':''"
|
||
|
@click="changeIndex(index)">
|
||
|
<view>{{item.name}}</view>
|
||
|
<view class="margin-top-xs">{{item.data}}</view>
|
||
|
</view>
|
||
|
</scroll-view>
|
||
|
</view>
|
||
|
</view>
|
||
|
</template>
|
||
|
|
||
|
<script>
|
||
|
export default {
|
||
|
data() {
|
||
|
return {
|
||
|
time: [],
|
||
|
dateList: [],
|
||
|
tabIndex: 0
|
||
|
}
|
||
|
},
|
||
|
onLoad() {
|
||
|
this.getDay()
|
||
|
},
|
||
|
methods: {
|
||
|
changeIndex(index) {
|
||
|
this.tabIndex = index
|
||
|
},
|
||
|
getDay() {
|
||
|
var arr = []
|
||
|
for (let i = 0; i < 7; i++) {
|
||
|
var now = new Date();
|
||
|
//24 * 3600 * 1000 就是计算一天的时间
|
||
|
var date = new Date(now.getTime() + i * 24 * 3600 * 1000);
|
||
|
var year = date.getFullYear();
|
||
|
var month = date.getMonth() + 1;
|
||
|
var day = date.getDate();
|
||
|
let da = year + "-" + month + "-" + day
|
||
|
let data = month + "月" + day + '日'
|
||
|
var weekArray = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");
|
||
|
var week = weekArray[new Date(da).getDay()];
|
||
|
var order = {
|
||
|
name: '',
|
||
|
data: ''
|
||
|
}
|
||
|
order.name = week
|
||
|
order.data = data
|
||
|
this.dateList.push(da)
|
||
|
arr.push(order)
|
||
|
}
|
||
|
this.time = arr
|
||
|
console.log(order)
|
||
|
// return time
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
</script>
|
||
|
|
||
|
<style>
|
||
|
page {
|
||
|
background: #F5F5F5;
|
||
|
}
|
||
|
|
||
|
.bg {
|
||
|
background: #ffffff;
|
||
|
}
|
||
|
|
||
|
.scroll-view {
|
||
|
width: 100%;
|
||
|
white-space: nowrap;
|
||
|
}
|
||
|
|
||
|
.scroll-item {
|
||
|
display: inline-block;
|
||
|
width: 130upx;
|
||
|
padding: 25upx 10upx;
|
||
|
/* background: #F7F7F7; */
|
||
|
margin-right: 30upx;
|
||
|
border-radius: 16upx;
|
||
|
text-align: center;
|
||
|
|
||
|
}
|
||
|
|
||
|
.active {
|
||
|
background: #E8F9EF;
|
||
|
color: #00B88F;
|
||
|
border: 1rpx solid #00B88F;
|
||
|
}
|
||
|
</style>
|