按月份查询账单
- 预览效果
- 思路
- 1.获取**当前时间**
- 2.转换起止时间的时间格式（时间戳转字符串）
- 3.获取数据（传参）
- 4.data赋值
- 5.页面导航渲染
预览效果
思路
一般后台接口会提供你两个查询参数：startDate和endDate 那么怎样用这两个参数做一个漂亮的账单页面呢？
1.获取当前时间
```javascriptvar YEAR = util.formatYear(new Date()); var MONTH = util.formatMonth(new Date()); var day = util.formatDay(new Date()); var endTime = new Date();其中util中的几个方法：
//获取月份const formatMonth = date = { const month = date.getMonth() + 1 return month;}//获取年份const formatYear = date = { const year = date.getFullYear() return year;}//获取天const formatDay = date = { const day = date.getDate() return day;}别忘了在module.exports函数中添加方法名
2.转换起止时间的时间格式（时间戳转字符串）
var StringEndTime = this.DatetoYYYMMDD(endTime); var StringStartTime = this.getLastMonthTime(StringEndTime);//时间格式转换 DatetoYYYMMDD(dt) { var str = dt.toISOString(); return str.substring(0, str.indexOf("T")); },//获取上月时间字符串 getLastMonthTime:function(time){ //console.log(time) var year = parseInt(time.substring(0,4)) var month = parseInt(time.substring(5,7)); var day = parseInt(time.substring(8, 10)); var StringDate = ''; // console.log(year+'年'+month+'月'+day+'日') if (month 10) { if (day != 1) { StringDate = year + '-' + month + '-01' } else { StringDate = year + '-' + (month - 1) + '-01' } } else if (month == 10) { if (day != 1) { StringDate = year + '-' + month + '-01' } else { StringDate = year + '-0' + (month - 1) + '-01' } } else if (month10 && month1) { if (day != 1) { StringDate = year + '-0' + month + '-01' } else { StringDate = year + '-0' + (month - 1) + '-01' } } else if (month == 1) { if (day != 1) { StringDate = year + '-0' + month + '-01' } else { StringDate = (year - 1) + '-12' + '-01' } } return StringDate },3.获取数据（传参）
this.loadData(StringStartTime, StringEndTime)loadData: function (startTime,endTime){......}4.data赋值
data: { TabCur: 0, scrollLeft: 0, //当前月份 month:'', //当前年份 year:'', //时间 time:'', //时间表 monthList:[], startTime:'', endTime:'' },this.setData({ year:YEAR, month:MONTH }); for(var i=0; i12; i++){ // console.log('结束时间' + StringEndTime) //console.log('开始时间'+ StringStartTime) var newarray = [{ month: MONTH + ' 月', startTime: StringStartTime, endTime: StringEndTime, }] if(MONTH==0){ MONTH=12 var newarray = [{ month: MONTH + ' 月', startTime: StringStartTime, endTime: StringEndTime, }] this.setData({ monthList: this .data.monthList.concat(newarray) }) }else{ this.setData({ monthList: this.data.monthList.concat(newarray) }); } MONTH = MONTH - 1; StringEndTime = StringStartTime; StringStartTime = this.getLastMonthTime(StringStartTime) } // console.log(this.data.monthList) },5.页面导航渲染
UI组件我用的是colorUI （百度colorUI就可以了）
tabSelect(e) { this.setData({ endTime: e.currentTarget.dataset.endtime, startTime: e.currentTarget.dataset.starttime, TabCur: e.currentTarget.dataset.id, scrollLeft: (e.currentTarget.dataset.id - 1) * 60 }) wx.showLoading({ title: '加载中...', mask: true }); this.setData({ currentPage: 1 }); var startTime = this.data.startTime; var endTime = this.data.endTime; //获取账单数据 this.loadData(startTime, endTime); wx.hideLoading(); },wxml
!--账单页面--view class="cu-bar bg-white solid-bottom margin-top" view class="action" text class="cuIcon-title text-blue "/text 我的账单（近一年） /view/viewscroll-view scroll-x class="bg-white nav" scroll-with-animation scroll-left="{{scrollLeft}}" view class="cu-item {{index==TabCur?'text-green cur':''}}" wx:key wx:for="{{monthList}}" bindtap="tabSelect" data-id="{{index}}" data-endtime="{{item.endTime}}" data-starttime="{{item.startTime}}" {{item.month}} /view/scroll-viewview wx:for="{{monthList}}" wx:key wx:if="{{index==TabCur}}" view wx:for="{{contentlist}}" wx:key="id" wx:for-item="i" data-wtype="{{i.wtype}}" data-refoid="{{i.refoid}}" class="bg-grey padding margin" style="height:130rpx;" view class="left" /view view class="right"/view /view/view至此，大功告成。有不明白的同学可以留言。
