制作网站单页,图片怎么制作,网站栏目名称大全,湖南企业网站建设制作效果预览 下图中的红框区域 范例代码 src\pages.json
配置隐藏默认顶部导航栏 navigationStyle: custom, // 隐藏默认顶部导航src\pages\index\components\CustomNavbar.vue
封装自定义顶部导航栏的组件#xff08;要点在于#xff1a;获取屏幕边界… 效果预览 下图中的红框区域 范例代码 src\pages.json
配置隐藏默认顶部导航栏 navigationStyle: custom, // 隐藏默认顶部导航src\pages\index\components\CustomNavbar.vue
封装自定义顶部导航栏的组件要点在于获取屏幕边界到安全区域距离
script setup langts
// 获取屏幕边界到安全区域距离
const { safeAreaInsets } uni.getSystemInfoSync()
/scripttemplateview classnavbar :style{ paddingTop: safeAreaInsets?.top px }view classlogo!-- image classlogo-image src/static/images/logo.jpg/image --text classlogo-titleDOS圆梦大家庭/texttext classlogo-text诚挚缘分 成就梦想/text/view/view
/templatestyle langscss
.navbar {background-image: url(/static/images/navigator_bg.png);background-size: cover;display: flex;.logo {display: flex;align-items: center;height: 86rpx;padding: 20rpx;.logo-image {width: 40rpx;height: 40rpx;}.logo-title {font-size: 32rpx;color: #fff;font-weight: bold;}.logo-text {flex: 1;line-height: 28rpx;color: #fff;margin: 2rpx 0 0 20rpx;padding-left: 20rpx;border-left: 1rpx solid #fff;font-size: 26rpx;}}
}
/stylesrc\pages\index\index.vue
在目标页面中导入使用
import CustomNavbar from ./components/CustomNavbar.vueCustomNavbar /
