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>
|