zh_order_food_xcx/pages/order/index.vue

<template>
	<view class="flex-common-css iPhone-bottom flex-common-css box-border-box">
		<Nav title="订单" leftIconColor="#333" titleColor="#333"></Nav>
		
		<view class="nav-box box-border-box bgc-f display-flex">
			<view class="nav-item" :class="type == item.id?'fs-36 fw-600':'fs-34 fw-400'" 
			v-for="(item,i) in navList" :key="i">
				{{item.name}}
				<view v-if="type == item.id" class="nav-item-x"></view>
			</view>
		</view>
		
		<scroll-view :scroll-y="true" class="scroll-view-css" @scrolltolower="scrolltolower">
			
		</scroll-view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				type:2,
				navList:[
					{name:'外卖',id:2},
					{name:'外卖',id:1},
					{name:'外卖',id:1},
					{name:'外卖',id:1},
					{name:'外卖',id:1},
					{name:'外卖',id:1},
					{name:'外卖',id:1},
					{name:'外卖',id:1},
				]
			};
		},
		onLoad(e) {
			
		},
		mounted() {
			
		},
		methods: {
			scrolltolower() {
				console.log('触底');
			},
		},
	}
</script>

<style lang="scss" scoped>
	.nav-box{
		padding: 26rpx 44rpx;
		overflow-x: scroll;
		.nav-item{
			margin-right: 76rpx;
			white-space: nowrap;
			position: relative;
			.nav-item-x{
				position: absolute;
				width: 48rpx;
				height: 6rpx;
				border-radius: 20rpx;
				background-color: #41ABF5;
				left: 12rpx;
				bottom: -10rpx;
			}
		}
	}
</style>