预览效果

思路

一般后台接口会提供你两个查询参数：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() + 1return 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 (month<10 && month>1) {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; i<12; i++){// console.log('结束时间' + StringEndTime)//console.log('开始时间'+ StringStartTime)var newarray = [{month: MONTH + ' 月',startTime: StringStartTime,endTime: StringEndTime,}]if(MONTH==0){MONTH=12var 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>
</view>
<scroll-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-view>
<view 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>

至此，大功告成。有不明白的同学可以留言。

小程序按月份查询账单相关推荐

微信小程序云开发查询数据库结果为空
微信小程序云开发查询数据库结果为空问题描述: 先上代码: getNotice : function(){var that = thisconst db = wx.cloud.database()db ...
微信小程序之快递查询（完整版）
一.简介: 点击按钮查看快递信息.我也在网上找了很多快递查询的例子,但是它们都不是很详细.在代码上他们都没错,但是在配置上却缺少了一些东西,导致我们这些白嫖党并没有什么用,对于程序中出现的一些错误无法 ...
微信小程序实战—快递查询
微信小程序实战-快递查询案例需求:输入快递单号,点击查询按钮即可查看快递信息 api:阿里云全国快递物流查询关键代码: 数据定义(index.js) data: {motto: 'Hello Wo ...
微信小程序实现条件查询示例
微信小程序实现条件查询示例 index.js //index.js //获取应用实例 const app = getApp() const db = wx.cloud.database(); cons ...
微信小程序使用物流查询插件
微信小程序使用物流查询插件文章目录微信小程序使用物流查询插件添加插件添加成功使用方式声明使用插件引入插件包效果图物流查询插件添加插件登录微信公众平台后台->设置->第 ...
微信小程序制作天气查询系统
一.实验目标 1.掌握服务器域名配置和临时服务器部署: 2.掌握 wx.request 接口的用法. 二.实验步骤 (列出实验的关键步骤.代码解析.截图.) 和风天气API密钥申请 2.在微信小程序上 ...
微信小程序(四) 节点查询 | wx.createSelectorQuery
先看官方文档给出的说明查询节点信息的对象,返回一个SelectorQuery对象实例\color{#9a2323}{查询节点信息的对象,返回一个 SelectorQuery 对象实例}查询节点信息的 ...
微信小程序实现快递查询功能(附源码)
目录效果图项目结构快递查询API获取微信小程序后台配置页面代码 express页面代码 logistics页面代码注意问题(使用必看) 留言效果图项目结构快递查询API获取这里我使 ...
小程序swiper月份日历滑动
在小程序里用swiper做了一个月份日历,先上图叭直接贴代码叭: <view class="container"><view class="calend ...

小程序按月份查询账单

按月份查询账单

预览效果

思路

1.获取当前时间

2.转换起止时间的时间格式（时间戳转字符串）

3.获取数据（传参）

4.data赋值

5.页面导航渲染

小程序按月份查询账单相关推荐

最新文章

热门文章