uniapp 如何规划 vue3模式的页面模版

1. uniapp 如何规划 vue3模式的页面模版

在使用 UniApp 基于 Vue3 开发应用时，合理的页面模板规划可以帮助提高开发效率和代码的可维护性。

以下是一个简单的示例，展示了一个基本的页面模板结构。

这个模板包括了常见的部分：头部导航栏、主体内容区域以及底部操作栏。你可以根据实际需求进行扩展或修改。

<template>
  <view class="page-container">
    <!-- 头部导航栏 -->
    <view class="header">
      <text class="title">{{ pageTitle }}</text>
    </view>

    <!-- 主体内容区域 -->
    <scroll-view class="content" scroll-y @scrolltolower="loadMore">
      <view v-for="(item, index) in items" :key="index" class="item">
        {{ item }}
      </view>
    </scroll-view>

    <!-- 底部操作栏 -->
    <view class="footer">
      <button @click="addItem">添加项目</button>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';

const pageTitle = ref('示例页面');
const items = ref(['项目1', '项目2', '项目3']);

const addItem = () => {
  const newItem = `项目${items.value.length + 1}`;
  items.value.push(newItem);
};

const loadMore = () => {
  console.log('加载更多...');
};
</script>

<style scoped>
.page-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.header {
  background-color: #4cd964;
  color: white;
  padding: 20px;
  text-align: center;
}

.content {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}

.item {
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.footer {
  background-color: #f8f8f8;
  padding: 20px;
  text-align: center;
}
</style>

1.1. 解释

• • 头部导航栏 (<view class="header">): 包含页面标题。
• • 主体内容区域 (<scroll-view class="content" ...>): 使用 scroll-view 组件来实现滚动效果，其中包含了列表项。
• • 底部操作栏 (<view class="footer">): 包含一些按钮或其他操作元素。

1.2. 样式说明

• • .page-container: 页面容器，使用 Flexbox 布局，使其子元素垂直排列，并占满整个视口高度。
• • .header: 导航栏样式，设置了背景颜色、文字颜色、内边距等。
• • .content: 内容区域样式，设置了内边距和滚动属性。
• • .item: 列表项样式，设置了间距、边框和圆角。
• • .footer: 底部操作栏样式，设置了背景颜色、内边距等。

这个模板可以根据具体需求进行调整，比如增加侧边栏、改变布局方式等等。