nzhbsr/pages/transaction/transaction.vue

<template>
	<view class="content">
		<scroll-view scroll-x="true" :scroll-with-animation="true" class="navbar">
			<view class="navbar-item" :class="{ current: tabCurrentIndex === index }" v-for="(item, index) in typelist" @click="tabClick(index)">{{ item.name }}</view>
		</scroll-view>
		<view class="list">
			<view class="list-title flex">
				<view class="title-left">交易對</view>
				<view class="title-center">最新價格</view>
				<view class="title-right">24h漲跌</view>
			</view>
			<scroll-view class="swiper-box" scroll-y="true" :style="{ height: maxheight }">
				<view class="list-main flex" v-for="(item, index) in list">
					<view class="main-left">{{ item.jyd }}</view>
					<view class="main-center" :class="{ down: item.zd < 0, ping: item.zd == 0 }">{{ item.price == 0 ? '--.--' : item.price }}</view>
					<view class="main-right">
						<view class="btn" :class="{ down: item.zd < 0, ping: item.zd == 0 }">{{ item.zd }}%</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
export default {
	onReady(res) {
		var _this = this;
		uni.getSystemInfo({
			success: resu => {
				const query = uni.createSelectorQuery();
				query.select('.swiper-box').boundingClientRect();
				query.exec(function(res) {
					_this.maxheight = resu.windowHeight - res[0].top + 'px';
					console.log('打印页面的剩余高度', _this.maxheight);
				});
			},
			fail: res => {
				console.log('打印页面的剩余高度', res);
			}
		});
	},
	data() {
		return {
			typelist: [{ name: 'USDT市场' }, { name: 'LP市场' }, { name: 'BNB市场' }, { name: 'TP市场' }],
			tabCurrentIndex: 0,
			maxheight: '',
			list: [
				{ jyd: 'BTC/USDT', price: '0.8431', zd: 1.2 },
				{ jyd: 'ETH/USDT', price: '0.8431', zd: -1.2 },
				{ jyd: 'EOS/USDT', price: '0.8431', zd: 1.2 },
				{ jyd: 'DOGE/USDT', price: '0.8431', zd: 1.2 },
				{ jyd: 'BCH/USDT', price: '0.8431', zd: 1.2 },
				{ jyd: 'BTC/USDT', price: '0', zd: 0 },
				{ jyd: 'BTC/USDT', price: '0.8431', zd: 1.2 },
				{ jyd: 'BTC/USDT', price: '0.8431', zd: 1.2 },
				{ jyd: 'BTC/USDT', price: '0.8431', zd: -1.2 },
				{ jyd: 'BTC/USDT', price: '0.8431', zd: 1.2 },
				{ jyd: 'BTC/USDT', price: '0.8431', zd: 1.2 },
				{ jyd: 'BTC/USDT', price: '0.8431', zd: 1.2 },
				{ jyd: 'BTC/USDT', price: '0.8431', zd: -1.2 },
				{ jyd: 'BTC/USDT', price: '0.8431', zd: 1.2 },
				{ jyd: 'BTC/USDT', price: '0.8431', zd: 1.2 },
				{ jyd: 'BTC/USDT', price: '0.8431', zd: -1.2 },
				{ jyd: 'BTC/USDT', price: '0.8431', zd: -1.2 },
				{ jyd: 'BTC/USDT', price: '0.8431', zd: 1.2 }
			]
		};
	},
	onLoad() {},
	onShow() {},
	methods: {
		tabClick(opt) {
			this.tabCurrentIndex = opt;
		}
	}
};
</script>

<style lang="scss">
page,
.content {
	height: auto;
	min-height: 100%;
	background: #f6f6f6;
}
.navbar {
	padding-top: 34rpx;
	display: flex;
	align-items: center;
	white-space: nowrap;
	height: 100rpx;
	.navbar-item {
		text-align: center;
		display: inline-block;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #777988;
		margin-left: 115rpx;
		padding-bottom: 14rpx;
		line-height: 1;
		&.current {
			border-bottom: 3px solid #f7d359;
		}
	}
}
.list {
	background: #ffffff;
	border-top-left-radius: 26rpx;
	border-top-right-radius: 26rpx;
	padding: 40rpx 15rpx 0;
	.list-title {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #525c6e;
		padding-bottom: 32rpx;
		.title-left {
			text-align: left;
			width: 33%;
		}
		.title-center {
			text-align: center;
			width: 33%;
		}
		.title-right {
			text-align: right;
			width: 33%;
		}
	}
	.list-main {
		padding: 12rpx 0;
		.main-left {
			text-align: left;
			width: 33%;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #525c6e;
		}
		.main-center {
			text-align: center;
			width: 33%;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #e15560;
			&.down {
				color: #5ec886;
			}
			&.ping {
				color: #525c6e;
			}
		}
		.main-right {
			text-align: right;
			width: 33%;
			display: flex;
			justify-content: flex-end;
			.btn {
				width: 122rpx;
				height: 63rpx;
				background: #e15562;
				border-radius: 5rpx;
				text-align: center;
				line-height: 63rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #ffffff;
				&.down {
					background: #5ec886;
				}
				&.ping {
					background: #f6f6f6;
				}
			}
		}
	}
}
</style>