123456

pages.json

@@ -1,84 +1,96 @@
-{
-	"pages": [{
-			"path": "pages/index/index",
-			"style": {
-				"enablePullDownRefresh": true,
-				"navigationBarTitleText": "首页"
-			}
-		},
-		{
-			"path": "pages/public/register",
-			"style": {
-				"navigationBarTitleText": "注册",
-				"app-plus": {
-					"titleNView": {
-						"type": "transparent"
-					}
-				}
-			}
-		}, {
-			"path": "pages/public/login",
-			"style": {
-				"navigationBarTitleText": "登录",
-				"app-plus": {
-					"titleNView": {
-						"type": "transparent"
-					}
-				}
-			}
-		},
-		{
-			"path": "pages/public/wxLogin",
-			"style": {
-				"navigationBarTitleText": "微信登录",
-				"app-plus": {
-					"titleNView": {
-						"type": "transparent"
-					}
-				}
-			}
-		},
-		{
-			"path": "pages/public/forget",
-			"style": {
-				"navigationBarTitleText": "忘记密码",
-				"app-plus": {
-					"titleNView": {
-						"type": "transparent"
-					}
-				}
-			}
+{
+	"pages": [{
+			"path": "pages/index/index",
+			"style": {
+				"enablePullDownRefresh": true,
+				"navigationBarTitleText": "首页"
+			}
+		},
+		{
+			"path": "pages/transaction/transaction",
+			"style": {
+				"navigationBarTitleText": "幣幣交易市場"
+			}
+		},
+		{
+			"path": "pages/public/register",
+			"style": {
+				"navigationBarTitleText": "注册",
+				"app-plus": {
+					"titleNView": {
+						"type": "transparent"
+					}
+				}
+			}
+		}, {
+			"path": "pages/public/login",
+			"style": {
+				"navigationBarTitleText": "登录",
+				"app-plus": {
+					"titleNView": {
+						"type": "transparent"
+					}
+				}
+			}
+		},
+		{
+			"path": "pages/public/wxLogin",
+			"style": {
+				"navigationBarTitleText": "微信登录",
+				"app-plus": {
+					"titleNView": {
+						"type": "transparent"
+					}
+				}
+			}
+		},
+		{
+			"path": "pages/public/forget",
+			"style": {
+				"navigationBarTitleText": "忘记密码",
+				"app-plus": {
+					"titleNView": {
+						"type": "transparent"
+					}
+				}
+			}
 		},
 		{
 			"path": "pages/user/user",
 			"style": {
 				"navigationBarTitleText": "我的"
 			}
-		}
-	],
-	"globalStyle": {
-		"navigationBarTextStyle": "black",
-		"navigationBarTitleText": "uni-app",
-		"navigationBarBackgroundColor": "#FFFFFF",
-		"backgroundColor": "#f8f8f8"
-	},
-	"tabBar": {
-		"color": "#C0C4CC",
-		"selectedColor": "#5DBC7C",
-		"borderStyle": "black",
-		"backgroundColor": "#ffffff",
-		"list": [{
-				"pagePath": "pages/index/index",
-				"iconPath": "static/tabBar/tab-home.png",
-				"selectedIconPath": "static/tabBar/tab-home-current.png",
-				"text": "首页"
-			},
-			{
-				"pagePath": "pages/user/user",
-				"iconPath": "static/tabBar/tab-my.png",
-				"selectedIconPath": "static/tabBar/tab-my-current.png",
-				"text": "我的"
-			}
-		]
-	}
+		}
+	],
+	"globalStyle": {
+		"navigationBarTextStyle": "black",
+		"navigationBarTitleText": "uni-app",
+		"navigationBarBackgroundColor": "#FFFFFF",
+		"backgroundColor": "#f8f8f8"
+	},
+	"tabBar": {
+		"color": "#C0C4CC",
+		"selectedColor": "#5DBC7C",
+		"borderStyle": "black",
+		"backgroundColor": "#ffffff",
+		"list": [{
+				"pagePath": "pages/index/index",
+				"iconPath": "static/tabBar/tab-home.png",
+				"selectedIconPath": "static/tabBar/tab-home-current.png",
+				"text": "首页"
+			},
+			{
+				"pagePath": "pages/transaction/transaction",
+				"iconPath": "static/tabBar/tab-home.png",
+				"selectedIconPath": "static/tabBar/tab-home-current.png",
+				"text": "交易"
+			},
+			{
+				"pagePath": "pages/user/user",
+				"iconPath": "static/tabBar/tab-my.png",
+				"selectedIconPath": "static/tabBar/tab-my-current.png",
+				"text": "我的"
+			}
+		]
+	}
 }

pages/transaction/transaction.vue

@@ -0,0 +1,182 @@
+<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>

pages/user/user.vue

@@ -1,33 +1,18 @@
 <template>
-	<view class="content">
-
-	</view>
+	<view class="content"></view>
 </template>
 
 <script>
-	export default {
-		data() {
-			return {
-
-			}
-		},
-		onLoad() {
-
-		},
-		onShow() {
-
-		},
-		onReachBottom() {
-
-		},
-		onReady() {
-
-		},
-		methods: {
-
-		}
-	}
+export default {
+	data() {
+		return {};
+	},
+	onLoad() {},
+	onShow() {},
+	onReachBottom() {},
+	onReady() {},
+	methods: {}
+};
 </script>
 
-<style lang="scss">
-</style>
+<style lang="scss"></style>