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 相关文章推荐
用正则获取指定路径文件的名称
Feb 27 Javascript
extjs 04_grid 单击事件新发现
Nov 27 Javascript
js 时间函数应用加、减、比较、格式转换的示例代码
Aug 23 Javascript
jquery修改网页背景颜色通过css方法实现
Jun 06 Javascript
jQuery点击改变class并toggle及toggleClass()方法定义用法
Dec 11 Javascript
AngularJS 2.0新特性有哪些
Feb 18 Javascript
javascript url几种编码方式详解
Jun 06 Javascript
老生常谈js数据类型
Aug 03 Javascript
解决vue-cli脚手架打包后vendor文件过大的问题
Sep 27 Javascript
微信小程序实现的canvas合成图片功能示例
May 03 Javascript
vue+element创建动态的form表单及动态生成表格的行和列
May 20 Javascript
js对象简介与基本用法示例
Mar 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发电子邮件
2006/10/09 PHP
CI使用Tank Auth转移数据库导致密码用户错误的解决办法
2014/06/12 PHP
PHP生成图片验证码、点击切换实例
2014/06/25 PHP
php进行支付宝开发中return_url和notify_url的区别分析
2014/12/22 PHP
php版微信公众平台回复中文出现乱码问题的解决方法
2016/09/22 PHP
thinkPHP模板中for循环与switch语句用法示例
2016/11/30 PHP
关于 Laravel Redis 多个进程同时取队列问题详解
2017/12/25 PHP
js下通过getList函数实现分页效果的代码
2010/09/17 Javascript
jQuery实现跨域
2015/02/03 Javascript
浅析AngularJS Filter用法
2015/12/28 Javascript
jQuery Ajax和getJSON获取后台普通json数据和层级json数据用法分析
2016/06/08 Javascript
使用JS轻松实现ionic调用键盘搜索功能(超实用)
2016/09/06 Javascript
BootStrap的双日历时间控件使用
2017/07/25 Javascript
手动用webpack搭建第一个ReactApp的示例
2018/04/11 Javascript
详解JavaScript的BUG和错误
2018/05/07 Javascript
对layui中表单元素的使用详解
2018/08/15 Javascript
微信小程序开发实现的选项卡(窗口顶部/底部TabBar)页面切换功能图文详解
2019/05/14 Javascript
Vue分页插件的前后端配置与使用
2019/10/09 Javascript
js实现GIF图片的分解和合成
2019/10/24 Javascript
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
2020/04/01 jQuery
JavaScript设计模式--简单工厂模式实例分析【XHR工厂案例】
2020/05/23 Javascript
Python获取远程文件大小的函数代码分享
2014/05/13 Python
python使用json序列化datetime类型实例解析
2018/02/11 Python
Python将文本去空格并保存到txt文件中的实例
2018/07/24 Python
python实现弹跳小球
2019/05/13 Python
Django 开发环境与生产环境的区分详解
2019/07/26 Python
Django中create和save方法的不同
2019/08/13 Python
Jupyter Notebook远程登录及密码设置操作
2020/04/10 Python
Django通过设置CORS解决跨域问题
2020/11/26 Python
白宫黑市官网:White House Black Market
2016/11/17 全球购物
会计师事务所审计实习自我鉴定
2013/09/20 职场文书
党的生日演讲稿
2014/09/10 职场文书
公司总经理岗位职责
2015/04/01 职场文书
2015年感恩父亲节活动策划方案
2015/05/05 职场文书
仙境之桥观后感
2015/06/16 职场文书
Python实现智慧校园自动评教全新版
2021/06/18 Python