关于小程序预约申请日期控件
js:
Page({ /** * 页面的初始数据 */ data: { calendar:[], width:0, currentIndex:0, currentTime: 0, timeArr: [ { "time": "09:00-09:30", "status": "约满" }, { "time": "09:50-10:20", "status": "约满" }, { "time": "10:40-11:10", "status": "约满" }, { "time": "11:30-12:00", "status": "约满" }, { "time": "14:00-14:30", "status": "约满" }, { "time": "14:30-15:30", "status": "约满" }, { "time": "16:00-16:30", "status": "约满" }, { "time": "17:00-17:30", "status": "约满" } ] }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { var that=this; function getThisMonthDays(year, month) { return new Date(year, month, 0).getDate(); } // 计算每月第一天是星期几 // function getFirstDayOfWeek(year, month) { // return new Date(Date.UTC(year, month - 1, 1)).getDay(); // } // //获取当前是星期几 // function getcurrdDayOfWeek(){ // var myDate = new Date(); // var days = myDate.getDay(); // return days; // } function getDateDayOfWeek(odate){ var week = odate.getDay(); var str=""; switch (week) { case 0 : str += "日"; break; case 1 : str += "一"; break; case 2 : str += "二"; break; case 3 : str += "三"; break; case 4 : str += "四"; break; case 5 : str += "五"; break; case 6 : str += "六"; break; } return str; } const date = new Date(); const cur_year = date.getFullYear(); const cur_month = date.getMonth() + 1; const cur_date=date.getDate(); //利用构造函数创建对象 function calendar(datetag){ var currdate=new Date(); currdate=currdate.setDate(currdate.getDate()+datetag); currdate=new Date(currdate); var tempdate=currdate.getDate(); this.date=currdate.getFullYear()+'-'+(currdate.getMonth() + 1)+'-'+tempdate; var cweek=getDateDayOfWeek(currdate); console.log(tempdate+":"+datetag) if(tempdate==cur_date){ this.week = "今天"; }else if(tempdate==cur_date+1){ this.week = "明天"; }else{ this.week = '星期' + cweek; } } for(var i=0;i<7;i++){ var tempxq=new calendar(i); that.data.calendar[i] = tempxq; } that.data.calendar = that.data.calendar.filter(item =>item.week!='星期六'&&item.week!='星期日'); that.setData({ calendar: that.data.calendar }) //设置scroll-view的子容器的宽度 that.setData({ width: 186 * parseInt(that.data.calendar.length - cur_date <= 5 ? that.data.calendar.length : 5) }) }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { }, select:function(event){ //为上半部分的点击事件 this.setData({ currentIndex: event.currentTarget.dataset.index }) console.log(event.currentTarget.dataset.date) }, selectTime:function(event){ //为下半部分的点击事件 this.setData({ currentTime: event.currentTarget.dataset.tindex }) console.log(event.currentTarget.dataset.time) } })
css:
scroll-view{ height: 128rpx; width: 100%; } scroll-view .list{ display: flex; flex-wrap: nowrap; justify-content: flex-start; width: 1302rpx; } scroll-view .listItem{ text-align: center; width: 186rpx; height: 128rpx; background-color: #f1f2f6; padding-top: 30rpx; box-sizing: border-box; /* float: left; */ display: inline-block; } scroll-view .listItem text{ display: block; } scroll-view .listItem .name{ font-size: 30rpx; } scroll-view .listItem .date{ font-size: 30rpx; } scroll-view .current{ background-color: #76aef8; } scroll-view .current text{ color: #fff; } .time{ width: 95%; display: flex; flex-wrap: wrap; justify-content: flex-start; margin: 0 auto; margin-top: 30rpx; } .time .listItem{ width: 50%; height: 200rpx; text-align: center; box-sizing: border-box; background-color: #fff; padding-top: 35rpx; border: 1px solid #b9c1c8; } .time .listItem text{ display: block; font-size: 30rpx; } .time .current{ border: 1px solid #76aef8; } .time .current text{ color: #76aef8; } .operate button{ width:300rpx; height: 88rpx; background-color: #fff; } .operate .del{ color: #e54449; } .operate button::after{ border: 2px solid #e54449; } .operate{ display: flex; flex-wrap: nowrap; justify-content: space-around; } .operate button:nth-child(2):after{ border: 2px solid #e54449; } .operate .save{ color: #fff; background-color: #e54449; } .operate{ width: 100%; padding: 30rpx 0; background-color: #fff; position: fixed; bottom: 0; }
wxml:
<view class='containt'> <scroll-view class="scroll-view_H" scroll-x> <view class='list' style='width:{{ width }}rpx'> <view bindtap="select" wx:for="{{ calendar }}" wx:for-item="item" wx:for-index="index" data-index="{{ index }}" class='listItem {{index==currentIndex? "current":""}}' wx:key='' data-date="{{ item.date}}"> <text class='name'>{{ item.week }}</text> <text class='date'>{{ item.date }}</text> </view> </view> </scroll-view> <view class='time'> <view wx:for="{{ timeArr }}" wx:for-item="timeItem" wx:for-index="timeIndex" data-Tindex="{{ timeIndex }}" data-time="{{ timeItem.time}}" bindtap='selectTime' class='listItem {{ currentTime==timeIndex? "current":"" }}' wx:key=''> <text>{{ timeItem.time }}</text> <text>{{ timeItem.status }}</text> </view> </view> <view class='operate'> <button class='del'>取消</button> <button class='save'>选择</button> </view> </view>
我的样式也是借鉴别人网上的，由于我们申请有些特殊就是只能周一。。。。。。周五可以申请。加之本人前端很菜。对js 稍做修改完成了自己业务。界面如下：
