i2-school-employee-uniapp/pages/message/index.vue

<template>
	<view class="message-page">
		<!-- 导航栏 -->
		<u-navbar fixed title="消息" placeholder>
			<view class="u-nav-slot" slot="right"></view>
			<view class="u-nav-slot" slot="left">
				<text class="cuIcon-filter"></text>
			</view>
		</u-navbar>
				
		<!-- tabs -->
		<scroll-view scroll-x class="bg-white nav">
			<view class="flex text-center">
				<view class="cu-item flex-sub" :class="tabIndex==index?'text-red cur':''" v-for="(item,index) in tabs" :key="index" @tap="tabSelect" :data-id="index">
					{{ item.name }}
				</view>
			</view>
		</scroll-view>
			
		<!-- List -->
		<u-gap height="1"></u-gap>
		
		<!-- List -->
		<view class="message-content">
			<class-interaction-page v-show="tabIndex==0" />
		</view>
	</view>
</template>

<script>
import Api from '../../api/api.js';
import ClassInteractionPage from './class_interaction_page.vue'
export default {
	components: {
		ClassInteractionPage
	},
	data() {
		return {
			option: {
				size: 10,
				auto: false,
				loadDisabled: false
			},
			list: [],
			tabIndex: 0
		};
	},
	computed: {
		tabs() {
			return [
				{ 'index': 0, 'name': this.$i18n.t('classInteraction') },
				{ 'index': 1, 'name': this.$i18n.t('notification') }
			]
		}
	},
	onReady() {},
	mounted() {
	},
	methods: {
		tabSelect(e) {
			this.tabIndex = e.currentTarget.dataset.id
		}
	}
};
</script>

<style lang="scss">
	.message-page {
		width: 100%;
		position: absolute;
		display: flex;
		flex-direction: column;
		height: 100%;
		.message-content {
			padding: 0px 0px 120px;
		}
	}
	
</style>