dev/dcp-app-gate/pages/message/index.vue

<template>
	<view class="messages">
		<u-navbar
			back-icon-color="#fff"
			:back-text="$t('common.Back')" 
			:is-back="true" 
			:background="{background:'#1777FE'}"
			:back-text-style="{color:'#fff'}" 
			:border-bottom="true"
			title-color="#fff"
			:title="title"
			:custom-back="back"
		>
		</u-navbar>
		<view class="bg"></view>
		<view class="menu">
			<u-tabs :list="TopMenulist" :is-scroll="false" :current="current" @change="change" :bold="false" bar-width="120" bar-height="2"></u-tabs>
		</view>
		<view class="linewidth"></view>
		
		<view class="msgwrap" v-if="current==0">
			<msgPageo/>
		</view>
		<view class="msgwrap nomenu" v-if="current==1">
			<msgPagep/>
		</view>
	</view>
</template>

<script>

  import msgPageo from './pageO.vue';
  import msgPagep from './pageP.vue';

  export default {
    components:{
		msgPageo,
		msgPagep
    },
    data() {
      return {
		title:'',
		current:0,
		TopMenulist:[
			{
				name:this.$t('common.SystemMessage')
			},
			{
				name:this.$t('common.notification')
			},
		],
		
		Botcurrent:0,
        BotMenuList: [
			{
				id: "tab01",
				name: this.$t('common.All'),
				msgid: 0
			},
			{
				id: "tab02",
				// name: '活动消息',
				name:this.$t('common.ActiveMessage'),
				msgid: 23
			},
			{
				id: "tab03",
				// name: '服务消息',
				name:this.$t('common.ServiceMessage'),
				msgid: 223
			}, {
				id: "tab04",
				// name: '审核消息',
				name:this.$t('common.ReviewMessage'),
				msgid: 221
			}
		],
        tabIndex:0,
        scrollInto: "",
        indicatorLineLeft: 0,
        indicatorLineWidth: 0,
        isTap: false
      }
    },
	onShow(){
		this.title=this.$i18n.locale == 'zh'? '消息中心': 'Message Center';
	},
 
	methods: {
		change(index) {
			this.current = 0;
			this.current = index;
		},
		changeMenu(index){
			this.Botcurrent=0;
			this.Botcurrent=index;
		},
		//后退一步
		back(){
			// #ifdef H5
			history.back()
			// #endif
			// #ifndef H5
			uni.navigateBack()
			// #endif
		},
	}
  }
</script>

<style lang="scss" scoped>
	.messages{
		.bg{
			position:fixed;
			top:0;
			left:0;
			right:0;
			bottom:0;
			z-index:-1;
			background:#fff;
		}
		.linewidth{
			height:20upx;
			width:100%;
			background-color:#eee;
		}
		.menu{
			height:80upx;
			width:750upx;
			margin-bottom:6upx;
		}
	}
	.msgwrap{
		position:absolute;
		height:84%;
		width:100%;
		bottom:0;
		left:0;
		right:0;
		&.nomenu{
			height:85.6%;
		}
	}
	 
  
  
</style>