zh_order_food_xcx/pages-my/my-appraise.vue

<template>
	<view class="flex-common-css">
		<Nav title="我的评价" titleColor="#333" bgckgroundBox='#fff'></Nav>
		<view class="tab-box flex-justify-around bgc-f ">
			<view class="tab-but flex-1 flex-direction align-items-center" @click="tabStitle(index)"
				v-for="(item, index) in tabList" :key="index">
				<view class="fs-32 mb-18" :class="tabNum==index?'fc-41ABF5':'fc-3'">
					{{item}}
				</view>
				<view v-show="tabNum==index" class="tab-hr bgc-41ABF5"></view>
			</view>
		</view>
		<scroll-view :scroll-y="true" class="scroll-view-css" @scrolltolower="scrolltolower">
			<view class="list-box">
				<view class="item-box bgc-f b-rad-20" v-for="(item,index) in itemData" :key="index">
					<view class="fw-600 fs-32 fc-3 mb-16">
						{{item.name}}
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				tabNum: 0,
				tabOneNum: 0,
				tabTwoNum: 0,
				itemData: [{
					name: '猪油拌饭猪油拌（回兴店）'
				}]
			};
		},
		computed: {
			tabList() {
				return ['待评价(' + this.tabOneNum + ')', '已评价(' + this.tabTwoNum + ')'];
			}
		},
		onLoad(data) {},
		mounted() {},
		methods: {
			tabStitle(index) {
				this.tabNum = index
			},
			scrolltolower() {
				console.log('触底');
			},
		},
	}
</script>

<style lang="scss" scoped>
	.tab-box {
		padding: 22rpx 0 4rpx 0;
	}

	.tab-hr {
		width: 40rpx;
		height: 4rpx;
		border-radius: 2rpx;
	}

	.list-box {
		padding: 24rpx;
		box-sizing: border-box;
	}

	.item-box {
		padding: 24rpx;
		box-sizing: border-box;
	}
</style>