当前位置: 首页 > news >正文

分页以及tab栏切换,动态传类型

在这里插入图片描述

				<view class="disTitle"><view class="disName">账户明细</view><view class="nav"><u-tabs lineWidth="0" :activeStyle="{color: '#FD893F' }" :list="navList" @change="tabsChange":scrollable="false" :current="tabsCurrent"></u-tabs></view></view><view v-if="tabsCurrent === 0"><view class="content"><view class="conItem" v-for="item in list" :key="item.id"><view class="left"><view class="">{{item.sourceName}}</view><view class="">{{dataFormat(item.sourceTime)}}</view></view><view class="right" v-if="item.type===1" style="color: #F75038;">+{{item.money}}</view><view class="right" v-else-if="item.type===2">-{{item.money}}</view></view></view></view><view v-if="tabsCurrent === 1"><view class="content"><view class="conItem" v-for="item in list" :key="item.id"><view class="left"><view class="">{{item.sourceName}}</view><view class="">{{dataFormat(item.sourceTime)}}</view></view><view class="right" v-if="item.type===1" style="color: #F75038;">+{{item.money}}</view><view class="right" v-else-if="item.type===2">-{{item.money}}</view></view></view></view><view v-if="tabsCurrent === 2"><view class="content"><view class="conItem" v-for="item in list" :key="item.id"><view class="left"><view class="">{{item.sourceName}}</view><view class="">{{dataFormat(item.sourceTime)}}</view></view><view class="right" v-if="item.type===1" style="color: #F75038;">+{{item.money}}</view><view class="right" v-else-if="item.type===2">-{{item.money}}</view></view></view></view><view v-if="list.length<=0"><u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png"></u-empty></view>
	tabsCurrent: 0,navList: [{name: '全部',}, {name: '收入',}, {name: '支出'}],list: [],type: '',page: 1,pageSize: 10,onReachBottom() {if (this.list.length < this.total) {this.getBonusRollover(); // 加载下一页  }},methods:{//点击tab栏掉接口tabsChange(e) {this.tabsCurrent = e.index;this.page = 1 //充值为第一页this.list = []//清空列表if (this.tabsCurrent === 0) {this.type = ''//类型this.getBonusRollover()} else if (this.tabsCurrent === 1) {this.type = 1//类型this.getBonusRollover()} else if (this.tabsCurrent === 2) {this.type = 2//类型this.getBonusRollover()}},getBonusRollover() {let that = thislet params = {statementType: 1, // 1 余额 2 优惠金source: '',type: that.type, //全部'' 收入1 支出2 动态复制type类型,在切换的时候,默认传空pageNo: that.page,pageSize: that.pageSize}bonusRollover(params).then(res => {that.total = res.data.data.totalthat.page = that.page + 1;that.list =that.list.concat(res.data.data.list) })},}
http://www.lryc.cn/news/399341.html

相关文章:

  • 【算法】平衡二叉树
  • 五、 计算机网络(考点篇)
  • 如何解决数据分析问题:IPython与Pandas结合
  • 如何在 Microsoft Edge 上使用开发人员工具
  • 《Linux系统编程篇》认识在linux上的文件 ——基础篇
  • Qt:22.鼠标相关事件(实例演示——鼠标进入/离开某控件的事件、鼠标按下事件、鼠标释放事件、鼠标双击事件)
  • 笔记 4 :linux 0.11 中继续分析 0 号进程创建一号进程的 fork () 函数
  • Vue3 引入Vanta.js使用
  • LeetCode --- 134双周赛
  • 快速读出linux 内核中全局变量
  • postman录制设置
  • redis消息队列
  • Linux vim的使用(一键安装则好用的插件_forcpp),gcc的常见编译链接操作
  • css基础(1)
  • 高并发线程池设计Nginx线程池源码剖析
  • SEO:6个避免被搜索引擎惩罚的策略-华媒舍
  • STM32之六:SysTick系统滴答定时器
  • 全栈物联网项目:结合 C/C++、Python、Node.js 和 React 开发智能温控系统(附代码示例)
  • WPF学习(3) -- 控件模板
  • Netty Websocket SpringBoot Starter
  • 数据结构(4.2)——朴素模式匹配算法
  • git切换远程仓库地址
  • 同步与异步:.NET 中的 Task.WaitAll 和 Task.WhenAll
  • 在Linux系统实现瑞芯微RK3588部署rknntoolkit2进行模型转换
  • 【人工智能】Transformers之Pipeline(概述):30w+大模型极简应用
  • Jenkins中Node节点与构建任务
  • Leetcode3200. 三角形的最大高度
  • docker运行nginx挂载前端html页面步骤
  • kafka部署以及常用命令详细总结
  • 代码随想录算法训练营第29天|LeetCode 134. 加油站、135. 分发糖果、860.柠檬水找零、406.根据身高重建队列