分页以及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 = this
				let 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.total
					that.page = that.page + 1;
					that.list =that.list.concat(res.data.data.list) 
				})
			},
		}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/797136.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

企业网络实验(vmware虚拟机充当DHCP服务器)所有IP全部保留,只为已知mac分配固定IP

文章目录 需求实验修改dhcp虚拟机配置文件测试PC获取IP查看user-bind 需求 (vmware虚拟机充当DHCP服务器)所有IP全部保留&#xff0c;只为已知mac分配固定IP 实验 前期配置&#xff1a; https://blog.csdn.net/xzzteach/article/details/140406092 后续配置均在以上配置的前…

LLM推理优化笔记1:KV cache、Grouped-query attention等

KV cache 对于decoder-only 模型比如现在如火如荼的大模型&#xff0c;其在生成内容的过程中&#xff0c;为了避免冗余计算&#xff0c;会将Transformer里的self-attention的K和V矩阵给缓存起来&#xff0c;这个过程即为KV cache。 decoder-only模型的生成过程是自回归的&…

单元测试实施最佳方案(背景、实施、覆盖率统计)

1. 什么是单元测试&#xff1f; 对于很多开发人员来说&#xff0c;单元测试一定不陌生 单元测试是白盒测试的一种形式&#xff0c;它的目标是测试软件的最小单元——函数、方法或类。单元测试的主要目的是验证代码的正确性&#xff0c;以确保每个单元按照预期执行。单元测试通…

Android C++系列:Linux网络(三)协议格式

1. 数据包封装 传输层及其以下的机制由内核提供,应用层由用户进程提供(后面将介绍如何使用 socket API编写应用程序),应用程序对通讯数据的含义进行解释,而传输层及其以下 处理通讯的细节,将数据从一台计算机通过一定的路径发送到另一台计算机。应用层 数据通过协议栈发到…

搜索引擎中的相关性模型

一、什么是相关性模型&#xff1f; 相关性模型主要关注的是query和doc的相关性。例如给定query&#xff0c;和1000个doc&#xff0c;找到哪个doc是好query最相关的。 二、为什么需要相关性模型&#xff1f; 熟悉es的应该都熟悉BM25相关性算法。它是一个很简单的相关性算法。我…

nginx的四层负载均衡实战

目录 1 环境准备 1.1 mysql 部署 1.2 nginx 部署 1.3 关闭防火墙和selinux 2 nginx配置 2.1 修改nginx主配置文件 2.2 创建stream配置文件 2.3 重启nginx 3 测试四层代理是否轮循成功 3.1 远程链接通过代理服务器访问 3.2 动图演示 4 四层反向代理算法介绍 4.1 轮询&#xff0…

安全防御,防火墙配置NAT转换智能选举综合实验

一、实验拓扑图 二、实验需求 1、办公区设备可以通过电信链路和移动链路上网(多对多的NAT&#xff0c;并且需要保留一个公网IP不能用来转换) 2、分公司设备可以通过总公司的移动链路和电信链路访问到Dmz区的http服务器 3、多出口环境基于带宽比例进行选路&#xff0c;但是&…

python:使用matplotlib库绘制图像(四)

作者是跟着http://t.csdnimg.cn/4fVW0学习的&#xff0c;matplotlib系列文章是http://t.csdnimg.cn/4fVW0的自己学习过程中整理的详细说明版本&#xff0c;对小白更友好哦&#xff01; 四、条形图 1. 一个数据样本的条形图 条形图&#xff1a;常用于比较不同类别的数量或值&…

STM32之六:SysTick系统滴答定时器

目录 1. SysTick简介 2. 时钟来源 3. SysTick寄存器 3.1 CTRL—SysTick控制及状态寄存器 3.2 RELOAD—SysTick重装载数值寄存器 3.3 CURRENT—SysTick当前数值寄存器 4. systick系统定时器配置 5. 延时函数实现 5.1 延时函数编写步骤 5.2 微秒级延时函数delay_us 5.…

代理模式(大话设计模式)C/C++版本

代理模式 C #include <iostream> using namespace std;class Subject // Subject 定义了RealSubject和Proxy的共用接口..这样就在任何使用RealSubject的地方都可以使用Proxy { public:virtual void func(){cout << "Subject" << endl;} };class R…

Leetcode—3011. 判断一个数组是否可以变为有序【中等】(__builtin_popcount()、ranges::is_sorted())

2024每日刷题&#xff08;144&#xff09; Leetcode—3011. 判断一个数组是否可以变为有序 O(n)复杂度实现代码 class Solution { public:bool canSortArray(vector<int>& nums) {// 二进制数位下1数目相同的元素就不进行组内排序// 只进行分组// 当前组的值若小于…

全栈物联网项目:结合 C/C++、Python、Node.js 和 React 开发智能温控系统(附代码示例)

1. 项目概述 本文详细介绍了一个基于STM32微控制器和AWS IoT云平台的智能温控器项目。该项目旨在实现远程温度监控和控制,具有以下主要特点: 使用STM32F103微控制器作为主控芯片,负责数据采集、处理和控制逻辑采用DHT22数字温湿度传感器,精确采集环境温湿度数据通过ESP8266 W…

Android Spinner

1. Spinner Spinner是下拉列表&#xff0c;如图3-14所示&#xff0c;通常用于为用户提供选择输入。Spinner有一个重要的属性&#xff1a;spinnerMode&#xff0c;它有2种情况&#xff1a; 属性值为dropdown时&#xff0c;表示Spinner的数据下拉展示&#xff0c;如图1&#xf…

GenAl如何改变 DevOps 中的软件测试?

TestComplete 是一款自动化UI测试工具&#xff0c;这款工具目前在全球范围内被广泛应用于进行桌面、移动和Web应用的自动化测试。 TestComplete 集成了一种精心设计的自动化引擎&#xff0c;可以自动记录和回放用户的操作&#xff0c;方便用户进行UI&#xff08;用户界面&…

快速使用BRTR公式出具的大模型Prompt提示语

Role:文章模仿大师 Background: 你是一位文章模仿大师&#xff0c;擅长分析文章风格并进行模仿创作。老板常让你学习他人文章后进行模仿创作。 Attention: 请专注在文章模仿任务上&#xff0c;提供高质量的输出。 Profile: Author: 一博Version: 1.0Language: 中文Descri…

SpringCloud第三篇(服务中心与OpenFeign)

p 文章目录 一、服务中心二、Nacos注册中心 一、服务中心 在上一章我们实现了微服务拆分&#xff0c;并且通过Http请求实现了跨微服务的远程调用。不过这种手动发送Http请求的方式存在一些问题。 试想一下&#xff0c;假如商品微服务被调用较多&#xff0c;为了应对更高的并发…

韦东山嵌入式linux系列-具体单板的 LED 驱动程序

笔者使用的是STM32MP157的板子 1 怎么写 LED 驱动程序&#xff1f; 详细步骤如下&#xff1a; ① 看原理图确定引脚&#xff0c;确定引脚输出什么电平才能点亮/熄灭 LED ② 看主芯片手册&#xff0c;确定寄存器操作方法&#xff1a;哪些寄存器&#xff1f;哪些位&#xff1f;…

pytorch-pytorch之LSTM

目录 1. nn.LSTM2. nn.LSTMCell 1. nn.LSTM 初始化函数输入参数与RNN相同&#xff0c;分别是input_size&#xff0c;hidden_size和num_layer foward函数也与RNN类似&#xff0c;只不过返回值除了out外&#xff0c;ht变为(ht,ct) 代码见下图&#xff1a; 2. nn.LSTMCell 初…

基于与STM32的加湿器之旋转编码器驱动

1.简介 旋转编码器&#xff0c;也被称为轴编码器或脉冲编码器&#xff08;SPC&#xff09;&#xff0c;是一种将旋转的机械位移量转换为电气信号的传感器&#xff0c;其信号可用于检测位置、速度等。 2.工作原理 旋转编码器的工作原理主要基于光电转换或磁电转换。以光电式旋转…

电子签章 签到 互动 打卡 创意印章 支持小程序 H5 App

电子签章 签到 互动 打卡 创意印章 支持小程序 H5 App 定制化