Vent-App/pages/device/index.vue

<template>
  <view>
	<u-tabs class="devic-box-tab" :current="PageCur" :list="tabList" @click="NavChange"></u-tabs>
	
	<view class="">
		<home cur="home" v-if="PageCur == '0'" :key="0"></home>
		<history
		  :key="1"
		  cur="history"
		  v-if="PageCur == '1'"
		></history>
		<operation :key="2" cur="operation" v-if="PageCur == '2'"></operation>
	</view>
    
    <!-- <u-tabbar
      :value="PageCur"
      @change="(name) => (PageCur = name)"
      :fixed="true"
      :placeholder="true"
      :safeAreaInsetBottom="true"
    >
      <u-tabbar-item
        text="设备监测"
        name="home"
        icon="list-dot"
        @click="NavChange('home')"
      ></u-tabbar-item>
      <u-tabbar-item
        text="历史数据"
        name="history"
        icon="calendar"
        @click="NavChange('history')"
      ></u-tabbar-item>
      <u-tabbar-item
        text="操作记录"
        icon="setting"
        name="operation"
        @click="NavChange('operation')"
      ></u-tabbar-item>
      <u-tabbar-item
        text="预警分析"
        icon="plus-circle"
        name="warndata"
        @click="NavChange('warndata')"
      ></u-tabbar-item>
      <u-tabbar-item
        text="文件中心"
        icon="file-text"
        name="filecenter"
        @click="NavChange('filecenter')"
      ></u-tabbar-item>
    </u-tabbar> -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      PageCur: "0",
	  tabList: [
		  {
			name: '设备监测'
		  },
		  {
			name: '历史数据'
		  },
		  {
			name: '操作记录'
		  },
		 //  {
			// name: '预警分析'
		 //  },
	  ],
    };
  },
  onLoad: function () {
    this.PageCur = "0";
  },

  methods: {
    NavChange: function (item) {
      this.PageCur = item.index;
    },

  },
};
</script>

<style lang="scss" scoped>
	.devic-box-tab{
		margin-top: 50px;
	}
</style>