uni-app HBuilder X 主界面排版

发布于 1周前 作者 phonegap100 来自 Uni-App

uni-app HBuilder X 主界面排版

HBuilder X 目前的页面排版真的不太美观，也不太方便操作，真的期待好久了，可是HBX怎么改版界面始终没有优化，所以特意手绘了一下期待的HBX简略图

简略图

Harmonyos Next教程
2 回复

其实附带的 可以增加，语言提示如小程序，js，，ts，app，vue，react，nodejs 等等，可多选 控制台管理 快捷运行 代码节点标记并快速跳转


在uni-app中使用HBuilder X进行主界面排版时，可以通过vue文件进行布局设计。以下是一个简单的示例，展示如何使用uni-app的组件和样式来实现一个主界面排版。

首先，确保你的项目已经创建并正确配置了uni-app和HBuilder X。

1. 创建主页面组件

在pages目录下创建一个新的vue文件，例如index.vue，作为你的主界面。

<template>
  <view class="container">
    <view class="header">
      <text class="header-text">应用标题</text>
    </view>
    <view class="main">
      <view class="left-panel">
        <button @click="navigateTo('page1')">页面1</button>
        <button @click="navigateTo('page2')">页面2</button>
      </view>
      <view class="center-content">
        <image class="center-image" src="/static/image.png" mode="aspectFill"></image>
      </view>
      <view class="right-panel">
        <text class="info-text">欢迎使用uni-app</text>
      </view>
    </view>
    <view class="footer">
      <text class="footer-text">版权信息 © 2023</text>
    </view>
  </view>
</template>

<script>
export default {
  methods: {
    navigateTo(page) {
      uni.navigateTo({
        url: `/pages/${page}/${page}`
      });
    }
  }
}
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.header, .footer {
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 10px;
}
.main {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
}
.left-panel, .right-panel {
  flex: 1;
}
.center-content {
  flex: 2;
  display: flex;
  justify-content: center;
  align-items: center;
}
.center-image {
  width: 80%;
  height: auto;
}
.info-text, .header-text, .footer-text {
  font-size: 16px;
}
button {
  margin: 5px 0;
  padding: 10px;
  background-color: #007aff;
  color: #fff;
  border: none;
  border-radius: 5px;
}
</style>

2. 配置路由

确保在pages.json中正确配置了路由，以便能够导航到page1和page2。

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页"
      }
    },
    {
      "path": "pages/page1/page1",
      "style": {
        "navigationBarTitleText": "页面1"
      }
    },
    {
      "path": "pages/page2/page2",
      "style": {
        "navigationBarTitleText": "页面2"
      }
    }
  ]
}

以上代码展示了如何使用uni-app的组件和样式进行主界面排版，包括头部、主要内容区域（包含左右面板和中心内容）、以及底部版权信息。你可以根据实际需求进一步调整布局和样式。

回到顶部