uniapp实现横向滚动选择日期


Posted in Javascript onOctober 21, 2020

本文实例为大家分享了uniapp实现横向滚动选择日期的具体代码,供大家参考,具体内容如下

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 :key="index" v-for="(item, index) in dayList">
  <view :class="current == index ? 'select' : ''" class="dayTitle">
  <view style="display: flex;flex-direction: column;justify-content: center;width: 100%;height: 100%;">
  <view>{{ item.day }}</view>
  <view style="font-size: 25upx;" v-if="index == 0">今天</view>
  <view style="font-size: 25upx;" v-else="">星期{{ 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="" type="text/css">.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>

效果图

uniapp实现横向滚动选择日期

以上就是本文的全部内容,希望对大家的学习有所帮助。


Tags in this post...

Javascript 相关文章推荐
Array.prototype.slice.apply的使用方法
Mar 17 Javascript
jquery trim() 功能源代码
Feb 14 Javascript
js与jquery中获取当前鼠标的x、y坐标位置的代码
May 23 Javascript
关于js内存泄露的一个好例子
Dec 09 Javascript
$.each遍历对象、数组的属性值并进行处理
Jul 18 Javascript
js打造数组转json函数
Jan 14 Javascript
分享五个有用的jquery小技巧
Oct 08 Javascript
每个程序员都需要学习 JavaScript 的7个理由小结
Sep 03 Javascript
深入理解angular2启动项目步骤
Jul 15 Javascript
js求数组中全部数字可拼接出的最大整数示例代码
Aug 25 Javascript
JS动态修改网页body的背景色实例代码
Oct 07 Javascript
JS+canvas画布实现炫酷的旋转星空效果示例
Feb 13 Javascript
实现vuex原理的示例
Oct 21 #Javascript
详解JavaScript类型判断的四种方法
Oct 21 #Javascript
node.js如何根据URL返回指定的图片详解
Oct 21 #Javascript
vue中template的三种写法示例
Oct 21 #Javascript
Vue使用v-viewer实现图片预览
Oct 21 #Javascript
UEditor 自定义图片视频尺寸校验功能的实现代码
Oct 20 #Javascript
Vue+axios封装请求实现前后端分离
Oct 23 #Javascript
You might like
社区(php&amp;&amp;mysql)二
2006/10/09 PHP
PHP 选项及相关信息函数库
2006/12/04 PHP
Uncaught exception com_exception with message Failed to create COM object
2012/01/11 PHP
php自定义的格式化时间示例代码
2013/12/05 PHP
使用GD库生成带阴影文字的图片
2015/03/27 PHP
php生成动态验证码gif图片
2015/10/19 PHP
PHP生成随机字符串实例代码(字母+数字)
2019/09/11 PHP
Firefox中beforeunload事件的实现缺陷浅析
2012/05/03 Javascript
关于JS字符串函数String.replace()
2013/04/07 Javascript
JavaScript中常见的字符串操作函数及用法汇总
2015/05/04 Javascript
jQuery获取页面及个元素高度、宽度的总结——超实用
2015/07/28 Javascript
基于Layer+jQuery的自定义弹框
2020/05/26 Javascript
JS常见简单正则表达式验证功能小结【手机,地址,企业税号,金额,身份证等】
2017/01/22 Javascript
脚本div实现拖放功能(两种)
2017/02/13 Javascript
详解小程序输入框闪烁及重影BUG解决方案
2018/08/31 Javascript
对angularJs中controller控制器scope父子集作用域的实例讲解
2018/10/08 Javascript
详解node.js 事件循环
2020/07/22 Javascript
[05:03]2018DOTA2亚洲邀请赛主赛事首日回顾
2018/04/04 DOTA
Django 跨域请求处理的示例代码
2018/05/02 Python
python+pyqt5实现24点小游戏
2019/01/24 Python
在Qt中正确的设置窗体的背景图片的几种方法总结
2019/06/19 Python
图解python全局变量与局部变量相关知识
2019/11/02 Python
在Django中实现添加user到group并查看
2019/11/18 Python
Python: 传递列表副本方式
2019/12/19 Python
opencv 实现特定颜色线条提取与定位操作
2020/06/02 Python
Python函数的迭代器与生成器的示例代码
2020/06/18 Python
英国在线珠宝店:The Jewel Hut
2017/03/20 全球购物
SIMON MILLER官网:洛杉矶的生活方式品牌
2020/10/19 全球购物
香港艺人陈冠希创办的潮流品牌:JUICESTORE
2021/03/04 全球购物
采购部长岗位职责
2014/06/13 职场文书
银行实习推荐信
2015/03/27 职场文书
解析laravel使用workerman用户交互、服务器交互
2021/04/28 PHP
使用JS实现简易计算器
2021/06/14 Javascript
mybatis中sql语句CDATA标签的用法说明
2021/06/30 Java/Android
Python利用Turtle绘制哆啦A梦和小猪佩奇
2022/04/04 Python
VUE解决跨域问题Access to XMLHttpRequest at
2022/05/06 Vue.js