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

最新推荐文章于 2024-08-09 09:46:19 发布

愿➣

最新推荐文章于 2024-08-09 09:46:19 发布

阅读量353

点赞数 5

文章标签： uni-app 小程序

本文链接：https://blog.csdn.net/weixin_59527403/article/details/140394801

版权

在这里插入图片描述

				<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) 
				})
			},
		}