uniapp万能模板页

uniapp万能模板页的设计思路

万能模板页通常指可复用的页面结构，适用于多种业务场景。设计时需兼顾灵活性与统一性，确保既能快速适配不同需求，又能保持整体风格一致。

基础模板结构

页面骨架

<template>
  <view class="container">
    <!-- 顶部导航栏 -->
    <view v-if="showNavbar" class="navbar">
      <view class="navbar-left" @click="handleBack">
        <uni-icons type="arrowleft" size="24" />
      </view>
      <view class="navbar-title">{{ title }}</view>
      <view class="navbar-right">
        <slot name="nav-right"></slot>
      </view>
    </view>

    <!-- 内容区域 -->
    <scroll-view 
      scroll-y 
      :style="{height: scrollHeight}"
      @scrolltolower="loadMore"
    >
      <slot></slot>
      <view v-if="loading" class="loading-more">
        <uni-load-more :status="loadStatus" />
      </view>
    </scroll-view>

    <!-- 底部操作区 -->
    <view v-if="showFooter" class="footer">
      <slot name="footer"></slot>
    </view>
  </view>
</template>

关键功能实现

动态高度计算

computed: {
  scrollHeight() {
    let height = '100vh'
    if (this.showNavbar) height = `calc(${height} - 44px)`
    if (this.showFooter) height = `calc(${height} - 50px)`
    return height
  }
}

下拉刷新与加载更多

methods: {
  async onRefresh() {
    this.page = 1
    await this.fetchData()
    uni.stopPullDownRefresh()
  },
  loadMore() {
    if (this.loading || !this.hasMore) return
    this.page++
    this.fetchData()
  }
}

样式配置方案

SCSS变量控制

$navbar-height: 44px;
$footer-height: 50px;
$primary-color: #1890ff;

.container {
  position: relative;
  .navbar {
    height: $navbar-height;
    background: $primary-color;
  }
  .footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: $footer-height;
  }
}

扩展功能集成

全局状态管理 通过provide/inject实现跨组件通信：

provide() {
  return {
    templatePage: {
      setTitle: this.setTitle,
      toggleFooter: this.toggleFooter
    }
  }
}

多主题支持

watch: {
  theme(newVal) {
    document.documentElement.setAttribute('data-theme', newVal)
  }
}

最佳实践建议

1. 通过props暴露可配置参数：

   props: {
   showNavbar: { type: Boolean, default: true },
   title: { type: String, default: '' },
   showFooter: { type: Boolean, default: false }
   }

2. 使用mixin封装公共逻辑：

   export const templateMixin = {
   methods: {
    handleBack() {
      uni.navigateBack()
    }
   }
   }

3. 预设多种布局模式：

   <view class="layout-${type}">
   <!-- 网格/列表/卡片等布局 -->
   </view>

该模板可通过组合式API进一步优化，支持TypeScript类型定义，并配合uni_modules机制发布为通用模块。实际应用中应根据项目需求调整样式细节和功能扩展点。