uniapp主页布局

UniApp是一个基于Vue.js的跨平台开发框架，可以用于开发iOS、Android、H5等多个平台的应用。在UniApp中，主页布局可以通过使用Vue组件和样式来实现。

一种常见的UniApp主页布局方式是使用底部导航栏，可以在页面底部放置多个导航按钮，每个按钮对应一个页面。用户点击不同的按钮时，UniApp会自动切换到对应的页面。

以下是一个简单的UniApp主页布局示例：

1. 创建一个底部导航栏组件（BottomTabBar.vue）：

<template>
  <view class="tab-bar">
    <view class="tab-item" @click="switchTab(0)">
      <text>首页</text>
    </view>
    <view class="tab-item" @click="switchTab(1)">
      <text>消息</text>
    </view>
    <view class="tab-item" @click="switchTab(2)">
      <text>我的</text>
    </view>
  </view>
</template>

<script>
export default {
  methods: {
    switchTab(index) {
      uni.switchTab({
        url: this.tabList[index].pagePath
      });
    }
  }
}
</script>

<style>
.tab-bar {
  display: flex;  justify-content: space-around;
  align-items: center;
  height: 50px;
  background-color: #f5f5f5;
}

.tab-item {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

2. 在App.vue中引入底部导航栏组件，并配置页面路由：

<template>
  <view>
    <router-view></router-view>
    <bottom-tab-bar></bottom-tab-bar>
  </view>
</template>

<script>
import BottomTabBar from '@/components/BottomTabBar.vue';

export default {
  components: {
    BottomTabBar
  }
}
</script>

<style>
/* 全局样式 */
</style>

3. 在pages文件夹下创建三个页面组件（Home.vue、Message.vue、Mine.vue），并配置页面路由：

<template>
  <view>
    <!-- 页面内容 -->
  </view>
</template>

<script>
export default {
  // 页面逻辑
}
</script>

<style>
/* 页面样式 */
</style>

通过以上步骤，你可以实现一个简单的UniApp主页布局。当用户点击底部导航栏的按钮时，UniApp会自动切换到对应的页面。