picgo+absidian+gitee建立圖床筆記
阿新 • • 發佈:2022-04-16
本文例項為大家分享了uniapp實現橫向滾動選擇日期的具體程式碼,供大家參考,具體內容如下
文章來自轉載作者:Lucky伯爵
原文連結:uniapp實現橫向滾動選擇日期_javascript技巧_指令碼之家 (jb51.net)
1.方法封裝 common.js
//獲取當前時間,格式YYYY-MM-DD HH:MM:SS const GetNowTime = time => { var date = time, year = date.getFullYear(), month = date.getMonth() + 1, day = date.getDate(), hour= date.getHours() < 10 ? "0" + date.getHours() : date.getHours(), minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(), second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds(); month >= 1 && month <= 9 ? (month = "0" + month) : ""; day>= 0 && day <= 9 ? (day = "0" + day) : ""; // var timer = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second; var timer = year + '-' + month + '-' + day; return timer; } // 格式化電話號碼 const GetPhone = phone => { let tel = phone.slice(0, 3) + '****' + phone.slice(7, 11);return tel; } //返回日期和周幾陣列 function weekDate() { var myDate = new Date(); myDate.toLocaleDateString(); var month = myDate.getMonth() + 1; var time = myDate.getFullYear() + '年' + month + '月' + myDate.getDate() + '日'; var total = 1; // 個數 var dayList = []; dayList.push({ 'day': myDate.getDate(), 'month': myDate.getMonth() + total, 'week': toWeekDay(myDate.getDay()), 'year': myDate.getFullYear() }); for (var i = 0; i < 10; i++) { myDate.setDate(myDate.getDate() + total); // number 是最近幾天 則會自動計算 // 需求 月份-日 星期幾 dayList.push({ 'day': myDate.getDate(), 'month': myDate.getMonth() + total, 'week': toWeekDay(myDate.getDay()), 'year': myDate.getFullYear() }) } // return dayList; let length = dayList.length let arrOne = dayList[0] let arrLast = dayList[length - 1] let StartDate = arrOne.year.toString() + '-' + arrOne.month + '-' + arrOne.day let EndDate = arrLast.year.toString() + '-' + arrLast.month + '-' + arrLast.day return { dayList, StartDate, EndDate } } function toWeekDay(weekDay) { // 傳入資料 講一週的某一天返回成中文狀態下的字元 switch (weekDay) { case 1: return '一'; break; case 2: return '二'; break; case 3: return '三'; break; case 4: return '四'; break; case 5: return '五'; break; case 6: return '六'; break; case 0: return '日'; break; default: break; } return '傳入未知引數'; } module.exports = { GetNowTime, GetPhone, weekDate }
2.元件.vue
<template> <view> <view class="box"> <scroll-view scroll-x="true"> <block v-for="(item, index) in dayList" :key="index"> <view class="dayTitle" :class="current == index ? 'select' : ''" @click="timeSelectd(index)"> <view style="display: flex;flex-direction: column;justify-content: center;width: 100%;height: 100%;"> <view>{{ item.day }}</view> <view v-if="index == 0" style="font-size: 25upx;">今天</view> <view v-else style="font-size: 25upx;">星期{{ item.week }}</view> </view> </view> </block> </scroll-view> </view> </view> </template> <script> import Vue from 'vue'; import common from '../../common/common.js'; export default { data() { return { isShow: false, current: 0, dayList: [], xzTime: common.GetNowTime(new Date()) }; }, onLoad() { this.dayList = common.weekDate().dayList; }, methods: { // 日期選擇 timeSelectd(index) { this.current = index; let date = this.dayList[index].year + '-' + this.dayList[index].month + '-' + this.dayList[index].day; date = common.GetNowTime(new Date(date)); this.xzTime = date; console.log(this.xzTime); } } }; </script> <style scoped> .box { padding: 30upx; } scroll-view { padding: 20upx 0; width: 100%; white-space: nowrap; } .dayTitle { width: 120upx; height: 120upx; border-radius: 60upx; margin-left: 20upx; text-align: center; display: inline-block; } .select { color: #ffffff; background-color: #83cbac; } </style>
以上是原作者的vue樣式
下面是自己做了樣式改動
<template> <view> <view class="box"> <scroll-view scroll-x="true" class="scroll-box"> <view class="dayTitle" :class="allDate ? 'select' : ''" @click="queryAll"> <view style="display: flex;flex-direction: column;justify-content: center;width: 100%;height: 100%;"> <view style="font-size: 25upx;">不限</view> <view style="font-size: 25upx;">日期</view> </view> </view> <block v-for="(item, index) in dayList" :key="index"> <view class="dayTitle" :class="current == index ? 'select' : ''" @click="timeSelectd(index)"> <view style="display: flex;flex-direction: column;justify-content: center;width: 100%;height: 100%;"> <view>{{ item.day }}</view> <view v-if="index == 0" style="font-size: 25upx;">今天</view> <view v-else style="font-size: 25upx;">星期{{ item.week }}</view> </view> </view> </block> </scroll-view> </view> </view> </template> <script> import Vue from 'vue'; import common from './js/formatDate.js'; export default { props:{ dayList: { type: Object, default: function() { return {} } }, }, data() { return { isShow: false, current: 0, allDate:false, // dayList: [], xzTime: common.GetNowTime(new Date()) }; }, // onLoad:function(e) { // this.dayList = common.weekDate().dayList; // }, methods: { // 日期選擇 timeSelectd(index) { this.current = index; let date = this.dayList[index].year + '-' + this.dayList[index].month + '-' + this.dayList[index].day; date = common.GetNowTime(new Date(date)); this.xzTime = date; console.log(this.xzTime); }, queryAll(){ this.allDate = !this.allDate this.current = -1 } } }; </script> <style scoped> .box { padding: 30upx; } .scroll-box { padding: 20upx 0; width: 100%; white-space: nowrap; } .dayTitle { width: 80upx; height: 80upx; /* border-radius: 60upx; */ margin-left: 20upx; text-align: center; display: inline-block; } .select { color: #80d1c2; /* background-color: #83cbac; */ } </style>