微信小程序仿支付宝账单列表

支付宝是咋做的咱也不知道先把效果实现了再说

效果图如下:

js代码后端根据最后的时间向后查询size条数据

getData() {const params = {page: 1,size: 10,type: this.data.navActive + 1}const list = this.data.dateList;if (list.length <= 0) {const month = moment().format('YYYY-MM');this.setData({dateList: [{month,count: 0,list: []}]})this.getMonthCount(month, 0);params.beginAt = moment().format('YYYY-MM-DD HH:mm:ss');} else {// 有效月份const validMonths = this.data.dateList.filter(item => item.list.length > 0);// 有效月份的最后一条数据索引const lastIndex = validMonths[validMonths.length - 1].list.length - 1;params.beginAt = validMonths[validMonths.length - 1].list[lastIndex].createdAt;}app.ajax('GET', '/api/...', params).then(res => {res.data.map(item => {this.initDate(item)})})},initDate(item) {const curMonthIndex = this.data.dateList.length - 1;const itemMonth = moment(item.createdAt).format('YYYY-MM')// 如果早当前月份 将当前项放入当前月if (itemMonth === this.data.dateList[curMonthIndex].month) {this.setData({[`dateList[${curMonthIndex}].list`]: this.data.dateList[curMonthIndex].list.concat(item)})} else {const month = moment(this.data.dateList[curMonthIndex].month).subtract(1, 'months').format('YYYY-MM');const obj = {month,count: 0,list: []}this.setData({[`dateList[${curMonthIndex + 1}]`]: obj})this.getMonthCount(month, curMonthIndex + 1);this.initDate(item)}},/*** 获取每月总数*/getMonthCount(month, index) {app.ajax('GET', '/api/...', {type: this.data.navActive + 1,month}).then(res => {this.setData({[`dateList[${index}].count`]: res.data})}).catch(() => {})},

html

<van-tabs class="nav" active="{{ navActive }}" title-active-color="#303ff8" bind:change="onChange"><van-tab title="全部积分"><view class="nav-main"><view class="item" wx:for="{{dateList}}" wx:key="title"><view class="title">{{item.month}}月获取 <text class="count">{{item.count}}</text></view><van-cell wx:for="{{item.list}}" wx:key="id" wx:for-item="itm" title="{{itm.title}}" value="+{{itm.points}}" label="{{itm.createdAt}}" /></view></view></van-tab><van-tab title="已使用"><view class="nav-main"><view class="item" wx:for="{{dateList}}" wx:key="title"><view class="title">{{item.month}}月已使用 <text class="count">{{item.count}}</text></view><van-cell wx:for="{{item.list}}" wx:key="id" wx:for-item="itm" title="{{itm.title}}" value="-{{itm.points}}" label="{{itm.createdAt}}" /></view></view></van-tab>
</van-tabs>

微信小程序仿支付宝账单列表相关推荐

微信小程序 - 仿果库列表
这个篇文章带大家一起练练微信小程序布局. 下面将会按照以下的顺序介绍: 布局的实现逻辑的实现样式的实现 1.布局的实现最大的布局是view, view布局中包含了:一张图片,文字描述,信息栏和分 ...
微信小程序仿支付宝年账单页面滑动的效果展示
要有遥不可及的梦想,也要有脚踏实地的本事.----------- Grapefruit.Banuit Gang(香柚帮) 近来要做一个年账单页面,类似于支付宝年账单,就是对一年下单的总结,但是支付宝页 ...
微信小程序-仿朋友圈点赞评论操作面板
目录微信小程序-仿朋友圈点赞评论操作面板一.效果二.实现 1.wxml实现 2.js实现 3.wxss实现三.记录 1.dataset使用微信小程序-仿朋友圈点赞评论操作面板一.效果二. ...
到家服务公司php源码,微信小程序-仿五洲到家商城源码
微信小程序-仿五洲到家商城源码微信小程序仿五洲到家商城源码是一款精仿五洲到家app界面的小程序源码,适用于各类小程序商城系统,功能及模块均值得借鉴! 对应功能模块 > * 首页(定位成功情况且 ...
微信小程序-仿今日头条客户端
该仿今日头条的文章系列如下: 微信小程序-仿今日头条客户端微信小程序开发-仿今日头条(二) 转载请标明:https://blog.csdn.net/yangjianbo456/article/det ...
微信小程序仿写豆瓣评分我的页面
微信小程序仿写豆瓣评分我的页面搭建豆瓣评分我的页面,先在pages文件夹下创建pages,得到4个文件,在这4文件中来实现界面的搭建; 原文链接 1.头部header模块的搭建头部模块的搭建比较简 ...
微信小程序仿系统自带下拉刷新效果
微信小程序仿系统自带下拉刷新效果前言思路分析实现尾巴前言看到标题也许有人会说:系统不是已经自带了下拉刷新,你去仿照系统的下拉刷新是不是吃多了没事干?其实真相并不是这样的.在微信小程序手把手 ...
微信小程序仿微信SlideView组件slide-view
微信小程序仿微信SlideView组件. 使用 1.安装 slide-view 从小程序基础库版本 2.2.1 或以上.及开发者工具 1.02.1808300 或以上开始,小程序支持使用 npm 安装 ...
实现微信小程序和支付宝小程序二维码合并
实现微信小程序和支付宝小程序二维码合并,这样用户就可以通过同一个二维码进入微信或者支付宝啦 1.需要准备可以通过公网访问的服务器 2.微信小程序打开微信小程序后台->开发(左边)->开发 ...

微信小程序仿支付宝账单列表

微信小程序仿支付宝账单列表相关推荐

最新文章

热门文章