小程序实现左右按钮切换时间和DatetimePicker 时间选择组件相结合使用
主要功能的实现思路就是将我们的正常时间转成时间戳，在时间戳的基础上加一天(减一天)，然后再转换成正常的时间
WXML
<view><view>//前一天<view bindtap="leftbtn"><image src="/pages/img/image/jiankuohao-zuo.png"></image></view><view bindtap="showPopup">{{date}}</view>//后一天<view bindtap="rightbtn"><image src="/pages/img/image/jiankuohao.png"></image></view></view>//底部弹出层<van-popup show="{{ show }}"position="bottom"custom-style="height: 40%;"bind:close="onClose">//DatetimePicker 时间选择组件<van-datetime-pickertitle="选择年月日"type="datetime"value="{{ currentDate }}"min-date="{{ minDate }}"max-date="{{ maxDate }}"bind:input="onInput"bind:confirm="sure" //确定按钮/></van-popup><view class="bottom_content" ><view><view class="morning">上午</view><view class="big_box"><!-- <van-empty description="暂无数据" wx:if="{{empty}}" /> --><view wx:for="{{morninglist}}" wx:key="id" class="list_item" bindtap="morningitem" data-item="{{item}}" data-id="{{item.user_id}}"><view>{{item.truename}}</view><view class="list_content"><view wx:if="{{item.sex=='1'}}">男</view><view wx:elif="{{item.sex=='2'}}">女</view><view>{{item.age}}</view></view></view></view></view><!-- ====================================================================== --><view><view class="afternoon">下午</view><view class="big_box"><!-- <van-empty description="暂无数据" wx:if="{{empty}}" /> --><view wx:for="{{afternoonlist}}" wx:key="id" class="list_item" bindtap="afternoonitem" data-item="{{item}}" data-id="{{item.user_id}}"><view>{{item.truename}}</view><view class="list_content"><view wx:if="{{item.sex=='1'}}">男</view><view wx:elif="{{item.sex=='2'}}">女</view><view>{{item.age}}</view></view></view></view></view></view></view>
JS
import util from "../../Data/time.js";//引入小程序封装好的时间组件Page({data:{minDate: new Date((new Date().getFullYear() - 1), 10, 1).getTime(),maxDate: new Date((new Date().getFullYear() + 2), 10, 1).getTime(),show: false,//弹出层默认为falsemorninglist:[], //上午afternoonlist:[], //下午date:util.formatDateStr(new Date()),//页面默认显示当天的时间eventdate:"",}// 点击显示弹出层showPopup() {this.setData({show: true });},//点击隐藏弹出层onClose() {this.setData({show: false });},// =================================点击获取前一天时间=========================leftbtn(e){console.log(e);var repTime = (this.data.date).replace(/-/g, '-');//截取掉默认正常时间的'-'console.log(repTime);var timeTamp = Date.parse(this.data.date) / 1000*1000; //将默认的正常时间转换成时间戳console.log(timeTamp);//在时间戳的基础上减一天的事件戳然后在转换为正常时间let time = util.formatDateStr(new Date(timeTamp - 24 * 60 * 60*1000))console.log(time);this.setData({date:time,})this.data.date=time;if(this.data.date){//判断如果选择的时间和返回过来的时间相等的话就显示数据this.setData({date:time,})this.data.date=time;docapplist({date:this.data.date}).then(res=>{//传递时间参数获取数据的接口分上下午console.log(res);console.log(res.data.afternoon)if(res.code==1){if(res.data.length==0){//如果数据的长度为零上午和下午的数据皆为空this.setData({morninglist:[],afternoonlist:[],})this.data.morninglist=[];this.data.afternoonlist=[];}else if(res.data.afternoon==undefined){//如果下午的数据为undefined则afternoonlist为[]，上午的数据等于获取到的数据this.setData({morninglist:res.data.morning,afternoonlist:[],})this.data.morninglist=res.data.morning;this.data.afternoonlist=[];}else if(res.data.morning==undefined){//如果上午的数据为undefined则morninglist为[]，下午的数据等于获取到的数据this.setData({morninglist:[],afternoonlist:res.data.afternoon,})this.data.morninglist=[];this.data.afternoonlist=res.data.afternoon;}else{this.setData({//如果以上条件都不成立则说明上下午皆有数据morninglist:res.data.morning,afternoonlist:res.data.afternoon,})this.data.morninglist=res.data.morning;this.data.afternoonlist=res.data.afternoon;}}else if(res.code==0){wx.showToast({title: 'res.msg',})}}).catch(err=>{console.log(err);})}},// =================================点击获取后一天时间=========================leftbtn(e){console.log(e);var repTime = (this.data.date).replace(/-/g, '-');//截取掉默认正常时间的'-'console.log(repTime);var timeTamp = Date.parse(this.data.date) / 1000*1000; //将默认的正常时间转换成时间戳console.log(timeTamp);//在时间戳的基础上加一天的事件戳然后在转换为正常时间let time = util.formatDateStr(new Date(timeTamp + 24 * 60 * 60*1000))console.log(time);this.setData({date:time,})this.data.date=time;if(this.data.date){//判断如果选择的时间和返回过来的时间相等的话就显示数据this.setData({date:time,})this.data.date=time;docapplist({date:this.data.date}).then(res=>{//传递时间参数获取数据的接口分上下午console.log(res);console.log(res.data.afternoon)if(res.code==1){if(res.data.length==0){//如果数据的长度为零上午和下午的数据皆为空this.setData({morninglist:[],afternoonlist:[],})this.data.morninglist=[];this.data.afternoonlist=[];}else if(res.data.afternoon==undefined){//如果下午的数据为undefined则afternoonlist为[]，上午的数据等于获取到的数据this.setData({morninglist:res.data.morning,afternoonlist:[],})this.data.morninglist=res.data.morning;this.data.afternoonlist=[];}else if(res.data.morning==undefined){//如果上午的数据为undefined则morninglist为[]，下午的数据等于获取到的数据this.setData({morninglist:[],afternoonlist:res.data.afternoon,})this.data.morninglist=[];this.data.afternoonlist=res.data.afternoon;}else{this.setData({//如果以上条件都不成立则说明上下午皆有数据morninglist:res.data.morning,afternoonlist:res.data.afternoon,})this.data.morninglist=res.data.morning;this.data.afternoonlist=res.data.afternoon;}}else if(res.code==0){wx.showToast({title: 'res.msg',})}}).catch(err=>{console.log(err);})}},// 弹出框确定按钮sure(value){// console.log(123)console.log(value.detail)let time = util.formatDateStr(new Date(value.detail)) //将点击时间组件获取到的时间转换成正常时间console.log(time);this.setData({date:time,})this.data.date=time;if(this.data.date){//判断如果选择的时间和返回过来的时间相等的话就显示数据docapplist({date:this.data.date}).then(res=>{console.log(res);if(res.code==1){if(res.data.length==0){//如果数据的长度为零上午和下午的数据皆为空this.setData({morninglist:[],afternoonlist:[],})this.data.morninglist=[];this.data.afternoonlist=[];}else{//否则以上条件都不成立则说明上下午皆有数据this.setData({morninglist:res.data.morning,afternoonlist:res.data.afternoon,})this.data.morninglist=res.data.morning;this.data.afternoonlist=res.data.afternoon;}}}).catch(err=>{console.log(err);})}this.setData({show: false });},})
每天分享一点点。
