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

html 复制代码
				<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>
javascript 复制代码
	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) 
				})
			},
		}
相关推荐
百思可瑞教育5 小时前
Vue中使用keep-alive实现页面前进刷新、后退缓存的完整方案
前端·javascript·vue.js·缓存·uni-app·北京百思可瑞教育
风早爽太7 小时前
在uni-app中使用lottie-web来展示Lottie动画
uni-app
毕设源码-赖学姐8 小时前
【开题答辩全过程】以 “饭否”食材搭配指南小程序的设计与实现为例,包含答辩的问题和答案
小程序
Autumn_yun8 小时前
uniapp 实现项目多语言切换
uni-app
nodcloud8 小时前
点可云进销存商城如何部署在微信小程序
微信小程序·小程序
懒大王952710 小时前
uni-app + Vue3 + EZUIKit.js 播放视频流
开发语言·javascript·uni-app
懒大王952710 小时前
uni-app + Vue3 开发展示 echarts 图表
前端·uni-app·echarts
百思可瑞教育13 小时前
Vue 生命周期详解:从初始化到销毁的全过程剖析
前端·javascript·vue.js·前端框架·uni-app·北京百思可瑞教育·百思可瑞教育
jingling55515 小时前
uniapp | 快速上手ThorUI组件
前端·笔记·前端框架·uni-app
老华带你飞17 小时前
畅阅读小程序|畅阅读系统|基于java的畅阅读系统小程序设计与实现(源码+数据库+文档)
java·数据库·vue.js·spring boot·小程序·毕设·畅阅读系统小程序