1

components/tabs/index.vue

@@ -0,0 +1,59 @@
+<template>
+	<view class="main">
+		<view class="one" :style="{background:tabs.bgColor||'#f9f9f9'}">
+			<scroll-view class="scrollView" scroll-x="true">
+				<view class="list" v-for="(item,index) in tabs.menu" :key="index" :style="{background:tabs.active==item.active?tabs.acbgColor||'#ffffff':''}" @tap="tabsChange(index,item)">
+					<text :style="{color:tabs.active==item.active?tabs.actxtColor||'#000000':tabs.txtColor||'#999999'}">{{item.title}}</text>
+				</view>
+			</scroll-view>
+		</view>
+		<slot></slot>
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {
+			tabs: {
+				type: Object,
+			},
+
+		},
+		data() {
+			return {};
+		},
+		methods: {
+			tabsChange(index, item) {
+				const that = this;
+				that.$emit('tabsChange', item)
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.main {
+		.one {
+			padding: 2vw;
+
+			.scrollView {
+				display: flex;
+				white-space: nowrap;
+				text-align: center;
+			}
+
+			.list {
+				display: inline-block;
+				padding: 2vw;
+				margin: 0 1.5vw;
+				text-align: center;
+				border-radius: 5px;
+
+				text {
+					font-weight: bold;
+					font-size: var(--font14Size);
+				}
+			}
+		}
+	}
+</style>

pages/index/index.vue

@@ -9,15 +9,53 @@
 				<button size="mini" @click="toCommon('pages/market/index')">购物车</button>
 				<button size="mini" @click="toCommon('pages/my/index')">我的1</button>
 			</view>
+			<view class="two">
+				<tabs :tabs="tabs" @tabsChange="tabsChange">
+					<view v-show="tabs.active=='a'">1</view>
+					<view v-show="tabs.active=='b'">2</view>
+					<view v-show="tabs.active=='c'">3</view>
+					<view v-show="tabs.active=='d'">4</view>
+					<view v-show="tabs.active=='e'">5</view>
+				</tabs>
+			</view>
 		</view>
 	</mobile-frame>
 </template>
 
 <script>
+	import tabs from '@/components/tabs/index.vue';
 	export default {
-		components: {},
+		components: {
+			tabs
+		},
 		data() {
-			return {};
+			return {
+				tabs: {
+					active: 'a',
+					menu: [ //菜单列表
+						{
+							title: '选项卡一',
+							active: 'a'
+						},
+						{
+							title: '选项卡二',
+							active: 'b'
+						},
+						{
+							title: '选项卡三',
+							active: 'c'
+						},
+						{
+							title: '选项卡四',
+							active: 'd'
+						},
+						{
+							title: '选项卡五',
+							active: 'e'
+						}
+					]
+				}
+			};
 		},
 		onShow: function() {
 			const that = this;
@@ -32,10 +70,14 @@
 				});
 			},
 			watchLogin() {
-				uni.redirectTo({
-					url: `/pages/home/index`
-				})
+				// uni.redirectTo({
+				// 	url: `/pages/home/index`
+				// })
 			},
+			tabsChange(e) {
+				const that = this;
+				that.$set(that.tabs, `active`, e.active)
+			}
 		}
 	}
 </script>
@@ -49,5 +91,28 @@
 				margin: 2vw;
 			}
 		}
+
+		.two {
+			padding: 2vw;
+
+			.scrollView {
+				display: flex;
+				white-space: nowrap;
+				text-align: center;
+			}
+
+			.list {
+				display: inline-block;
+				padding: 2vw;
+				margin: 0 1.5vw;
+				text-align: center;
+				border-radius: 5px;
+
+				text {
+					font-weight: bold;
+					font-size: var(--font14Size);
+				}
+			}
+		}
 	}
 </style>

pagesMy/order/index.vue

@@ -8,7 +8,8 @@
 				<scroll-view scroll-y="true" class="scroll-view" @scrolltolower="toPage">
 					<view class="list-scroll-view">
 						<view class="two_1">
-							<view class="cond_1">
+							
+							<!-- <view class="cond_1">
 								全部
 							</view>
 							<view class="cond_1">
@@ -19,7 +20,7 @@
 							</view>
 							<view class="cond_1">
 								待发货/消费
-							</view>
+							</view> -->
 						</view>
 						<view class="two_2">
 							<view class="list" v-for="(item,index) in list" :key="index">