分页以及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) 
				})
			},
		}

相关推荐

  1. tab高亮切换tab交互

    2024-07-13 10:46:05       54 阅读
  2. js实现tab切换

    2024-07-13 10:46:05       52 阅读
  3. Vue2-案例tab切换高亮

    2024-07-13 10:46:05       25 阅读
  4. el-table多选,选一个其他类型相同的也选中

    2024-07-13 10:46:05       36 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-07-13 10:46:05       67 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-07-13 10:46:05       72 阅读
  3. 在Django里面运行非项目文件

    2024-07-13 10:46:05       58 阅读
  4. Python语言-面向对象

    2024-07-13 10:46:05       69 阅读

热门阅读

  1. 【STM32 ARM】区分MCU,MPU与AP

    2024-07-13 10:46:05       21 阅读
  2. LeetCode 每日一题 2024/7/8-2024/7/14

    2024-07-13 10:46:05       27 阅读
  3. 工作需求第一次写千行SQL语句

    2024-07-13 10:46:05       21 阅读
  4. 项目管理开发实战

    2024-07-13 10:46:05       29 阅读
  5. 【AI原理解析】—知识图谱(KG)原理

    2024-07-13 10:46:05       18 阅读
  6. 0139__TCP协议

    2024-07-13 10:46:05       20 阅读
  7. sqlmap常用参数及示例

    2024-07-13 10:46:05       24 阅读
  8. 软件测试面试200问【答案+文档】

    2024-07-13 10:46:05       24 阅读
  9. C++之STL简介

    2024-07-13 10:46:05       23 阅读
  10. Linux——多路IO

    2024-07-13 10:46:05       25 阅读