169 lines
3.4 KiB
Vue
169 lines
3.4 KiB
Vue
<template>
|
||
<view class="un-pages-container">
|
||
<!-- 顶部导航栏 -->
|
||
<uni-nav-bar v-if="showNavBar" :fixed="true" :background-color="navBarBgColor" :color="navBarColor"
|
||
:status-bar="true" :border="navBarBorder" :left-icon="showBack ? 'left' : ''" :title="navBarTitle"
|
||
@click-left="handleBack">
|
||
<slot name="navbar-right" slot="right"></slot>
|
||
</uni-nav-bar>
|
||
|
||
<!-- 中间内容区域 -->
|
||
<scroll-view class="content-scroll" scroll-y :style="{ height: scrollHeight }" :show-scrollbar="showScrollbar">
|
||
<view class="content-wrapper">
|
||
<slot></slot>
|
||
</view>
|
||
</scroll-view>
|
||
|
||
<!-- 底部tabbar -->
|
||
<un-tab-bar v-if="showTabBar" :current-path="currentPath" @change="handleTabChange"></un-tab-bar>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'UnPages',
|
||
props: {
|
||
// 是否显示顶部导航栏
|
||
showNavBar: {
|
||
type: Boolean,
|
||
default: true
|
||
},
|
||
// 导航栏标题
|
||
navBarTitle: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
// 导航栏背景色
|
||
navBarBgColor: {
|
||
type: String,
|
||
default: '#fff'
|
||
},
|
||
// 导航栏文字颜色
|
||
navBarColor: {
|
||
type: String,
|
||
default: '#333'
|
||
},
|
||
// 导航栏是否显示边框
|
||
navBarBorder: {
|
||
type: Boolean,
|
||
default: true
|
||
},
|
||
// 是否显示返回按钮
|
||
showBack: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
// 是否显示底部tabbar
|
||
showTabBar: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
// 是否显示滚动条
|
||
showScrollbar: {
|
||
type: Boolean,
|
||
default: false
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
scrollHeight: 'calc(100vh - 44px)',
|
||
systemInfo: null,
|
||
currentPath: ''
|
||
}
|
||
},
|
||
mounted() {
|
||
this.calculateHeight()
|
||
// 获取当前页面路径
|
||
this.getCurrentPath()
|
||
// 监听窗口变化
|
||
uni.onWindowResize(() => {
|
||
this.calculateHeight()
|
||
})
|
||
},
|
||
methods: {
|
||
/**
|
||
* 计算滚动区域高度
|
||
*/
|
||
calculateHeight() {
|
||
try {
|
||
const systemInfo = uni.getSystemInfoSync()
|
||
const statusBarHeight = systemInfo.statusBarHeight || 0
|
||
const navBarHeight = this.showNavBar ? 44 : 0
|
||
const tabBarHeight = this.showTabBar ? 50 : 0 // tabbar高度约50px
|
||
|
||
let height = systemInfo.windowHeight - navBarHeight - tabBarHeight
|
||
|
||
// 如果有tabbar，加上安全区域
|
||
if (this.showTabBar && systemInfo.safeAreaInsets) {
|
||
height -= systemInfo.safeAreaInsets.bottom
|
||
}
|
||
|
||
this.scrollHeight = height + 'px'
|
||
} catch (e) {
|
||
console.error('计算高度失败:', e)
|
||
this.scrollHeight = 'calc(100vh - 44px)'
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 处理返回按钮点击
|
||
*/
|
||
handleBack() {
|
||
uni.navigateBack({
|
||
delta: 1,
|
||
fail: () => {
|
||
// 如果无法返回，跳转到首页
|
||
uni.switchTab({
|
||
url: '/pages/index/index'
|
||
})
|
||
}
|
||
})
|
||
},
|
||
|
||
/**
|
||
* 获取当前页面路径
|
||
*/
|
||
getCurrentPath() {
|
||
try {
|
||
const pages = getCurrentPages()
|
||
if (pages && pages.length > 0) {
|
||
const currentPage = pages[pages.length - 1]
|
||
this.currentPath = '/' + currentPage.route
|
||
}
|
||
} catch (e) {
|
||
console.error('获取当前页面路径失败:', e)
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 处理tab切换
|
||
*/
|
||
handleTabChange(path) {
|
||
this.$emit('tab-change', path)
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.un-pages-container {
|
||
width: 100%;
|
||
height: 100vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
background: #F8F8F8;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.content-scroll {
|
||
flex: 1;
|
||
width: 100%;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.content-wrapper {
|
||
width: 100%;
|
||
min-height: 100%;
|
||
}
|
||
</style>
|