WindowBird/buddhism
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

小程序导航栏设计

Browse Source
This commit is contained in:
minimaxagent1 2025-07-31 09:02:38 +08:00
parent 6c02ba4ea2
commit 5b555ddf90
3 changed files with 305 additions and 216 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
enum/common.js
View File

@ -1,6 +1,7 @@
export const CommonEnum = {
BACKGROUND: "https://api.ccttiot.com/image-1753769939853.png", //返回的按钮图像
RIGHT_CHEVRON:"https://api.ccttiot.com/image-1753773619878.png"
BACKGROUND: "https://api.ccttiot.com/image-1753769939853.png", //背景图片
RIGHT_CHEVRON:"https://api.ccttiot.com/image-1753773619878.png",
BACK_BUTTON:"https://api.ccttiot.com/image-1753868358514.png"
};
export default CommonEnum;

4
pages/monk/monk.vue
View File

@ -3,6 +3,7 @@
<u-navbar title="寺庙高僧" :border-bottom="false" :background="bgc" back-icon-color="#262B37" title-color='#262B37'
title-size='36' height='36' id="navbar">
</u-navbar>
<container>
<view class="header">
<image class="background-image" :src="CommonEnum.BACKGROUND" mode="aspectFill"></image>
<view class='searchBox'>
@ -29,6 +30,8 @@
</view>
</view>
</view>
</container>
</view>
</template>
@ -103,6 +106,7 @@
<style lang="scss">
.page {
position: relative;
width: 750rpx;
min-height: 100vh;
background: #F5F0E7;

96
pages/walkInto/walkInto.vue
View File

@ -1,29 +1,65 @@
<template>
<view class="page">
<u-navbar title="走进平山" :border-bottom="false" :background="bgc" back-icon-color="#262B37" title-color='#262B37'
title-size='36' height='36' id="navbar">
</u-navbar>
<view class="header">
<!-- 自定义导航栏 -->
<view class="custom-navbar" :style="{ paddingTop: statusBarHeight + 'px', height: navBarHeight + 'px' }">
<view class="navbar-left" @click="goBack" :style="{ height: capsuleHeight + 'px', lineHeight: capsuleHeight + 'px' }">
<image :src="CommonEnum.BACK_BUTTON" mode="aspectFit" class="back-icon"></image>
</view>
<view class="navbar-title" :style="{ height: capsuleHeight + 'px', lineHeight: capsuleHeight + 'px' }">走进平山</view>
<view class="navbar-right" :style="{ height: capsuleHeight + 'px', lineHeight: capsuleHeight + 'px' }"></view>
</view>
<view class="header" :style="{ marginTop: navBarHeight + 'px' }">
<!-- <image src="" mode=""></image> -->
<view>111</view>
<view>111222</view>
</view>
</view>
</template>
<script>
import CommonEnum from "../../enum/common";
export default {
computed: {
CommonEnum() {
return CommonEnum
}
},
data() {
return {
bgc: {
backgroundColor: "#F5F0E7",
},
statusBarHeight: 0,
navBarHeight: 0,
menuButtonInfo: null,
capsuleHeight: 0,
}
},
onLoad() {
this.getSystemInfo();
},
methods: {
goBack() {
uni.navigateBack({
delta: 1
});
},
getSystemInfo() {
// 获取系统信息
const systemInfo = uni.getSystemInfoSync();
// 获取状态栏高度
this.statusBarHeight = systemInfo.statusBarHeight;
// 获取胶囊按钮信息
this.menuButtonInfo = uni.getMenuButtonBoundingClientRect();
// 计算胶囊高度
this.capsuleHeight = this.menuButtonInfo.height;
// 计算导航栏高度（胶囊底部到状态栏顶部的距离）
this.navBarHeight = this.menuButtonInfo.bottom + 8;
}
}
}
</script>
@ -35,6 +71,54 @@ page {
background: #F5F0E7;
border-radius: 0rpx 0rpx 0rpx 0rpx;
}
/* 自定义导航栏样式 */
.custom-navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 999;
padding-top: 0;
background-color: #F5F0E7;
display: flex;
align-items: center;
justify-content: space-between;
padding-left: 30rpx;
padding-right: 30rpx;
box-sizing: border-box;
}
.navbar-left {
display: flex;
align-items: center;
justify-content: center;
width: 60rpx;
.back-icon {
width: 56rpx;
height: 56rpx;
}
}
.navbar-title {
font-size: 36rpx;
font-weight: bold;
color: #695347;
flex: 1;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
.navbar-right {
width: 60rpx;
display: flex;
align-items: center;
justify-content: center;
}
.header {
min-height: 100vh;
display: flex;