小程序实现日历左右滑动效果

本文实例为大家分享了小程序日历左右滑动效果的具体代码，供大家参考，具体内容如下

效果图

页面结构

scroll-view class=' scroll-view ' scroll-left ndex * item width } } ' scroll-x scroll-with-animation view class=' item ' style=' width : { { item width } } px ' wx : for=' { { date list } } ' data-index=' { { index } } ' bind tap=' click date ' view class=' text-view ' view class=' day ' { index==click index '？日间活动“: ' ' } } ' { { item。day } }/view text class=' month ' { item。月份} }月/text view wx : if=' { { item。month==sysmonth项。day==now date } } ' text class=' week '今日/text/view view wx : else text class=' week ' { item。week } }/text/view/view/view/roll-view js

//byjs _ sun/pages/product/all/all。JSpage({/* * *页面的初始数据*/data: { dateList:[]，//存放日期的数组nowDate: ' '，//系统当前日期}, //格式化日期，时间格式化时间(日期){ const year=date。getfullyear()const month=date。getmonth()1 const day=date。getdate()const hour=date。gethours()常量分钟=日期。getminutes()const second=date。getseconds()返回[年、月、日]。map(this.formatNumber).联接('/')' '[小时、分钟、秒]。map(this.formatNumber).join(':') }，//格式化数字formatNumber(n) { n=n.toString()返回n[1]？n : '0' n }，//获取日期详情getDateInfo(ts){ const Date=new Date(ts)；const weekArr=新数组('日', '一', '二', '三', '四', '五', '六');const week=date。GetDay()；让dateString=this.formatTime(日期);让shortDateString=datestring。替换(/\//g，'-').子串(5,10)。替换(///g，)月') '日；如果(日期。getdate()10){短日期字符串=短日期字符串。替换(/0/g，")；}返回{ shortDateString，DateString，month: date.getMonth() 1，day: date.getDate()，week: weekArr[week] }，/** *生命周期函数-监听页面加载*/onLoad:函数（选项){ var=thisvar myDate=new Date()；//获取系统当前时间var sysmonth=我的日期。getmonth()1 var now date=我的日期。getdate()；//当前是本月几日var today=mydate。tolocaledatestring()；//今日年月日那个。setdata({ now date : now date，sysmonth: sysmonth })、console.log('系统日期：'，myDate)；console.log('系统日期（年/月/日):',今天);console.log('系统日期（月):'，sysmonth)；console.log('系统日期（日):'，现在日期)；//获取屏幕宽度，设置每个日期宽度wx。getsystem info({ success :(RES)={ console。日志(RES)；这个。setdata({ window width : RES . window width，itemtwith : parseInt(RES . window width/7))})；}，})这个。initdata()；}, //初始化日期initData(){ const now datetime=new Date()；让DateList=[]；用于(让I=-30；我30I){让obj=这个。getdateinfo(现在的datetime I * 24 * 60 * 60 * 1000)；物体。is choose=I==0；日期列表。推送(obj)；} this.setData({ dateList，clickIndex: 30，scrolleftindex : 30 })；}, //点击日期方法单击日期{ var=thisconsole.log('点击日期携带的下标：'，e . CurrentTarget。数据集。索引)；//当前的点击的日期var索引=e . CurrentTarget。数据集。指数；那个。setdata({ click index : index })；//控制台。记录(那个。数据。scrolleftindex)；console.log('当前点击日期：'，that.data.dateList[index].短日期字符串)；//当前点击的日期//const {//index//}=e . CurrentTarget。数据集；//这个。setdata({//click index : index//})；//控制台。日志(这个。数据。datelist[index])；},})样式。滚动查看{ height: 200rpx背景色： # 313751;宽度： 100%;空白： nowrap}.项目{ height: 200rpxdisplay:内联块；}.文本视图{ display : flex align-items :居中；正义-内容：中心；弯曲方向：柱；宽度： 100%;高度： 100%;color: # fff}。月份{ font-size : 30 rpx边距-top : 10 rpx；}.周{ font-size : 32 rpx边距-top : 10 rpx；}.day { font-size : 32 rpx宽度： 60 rpx高度： 60 rpx border-半径： 10 rpx文本对齐：中心；线高： 60 rpx保证金-top : 20 rpx；}/* 日期选中的样式*/.日间活动{底色： # FFB 400；color: # fff}更多教程点击《Vue.js前端组件学习教程》 ,欢迎大家学习阅读。

关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。