原理很简单,将官网给头部导航条禁用,然后在相应的页面使用vue代码自己再写一个。
1、禁用官方头部导航
{
"path": "pages/user/personal", //页面
"style": {
"navigationStyle":"custom" //禁用uni-app默认的头部导航
}
}
2、自己在页面可以随心所欲的写自己要的样式啦
<template>
<view>
<view class="head_bg">
<image src="../../static/images/bg1.png"></image>
</view>
<view class="personal_box_1">
<view class="user_img">
<image src="../../static/images/userhead.png"></image>
<view>张zhang</view>
</view>
<ul>
<li>
<image src="../../static/images/notice1.png"></image>
<navigator url="" open-type="navigate">消息通知</navigator>
</li>
<li>
<image src="../../static/images/card.png"></image>
<navigator url="" open-type="navigate">志愿者证</navigator>
</li>
<li>
<image src="../../static/images/active.png"></image>
<navigator url="" open-type="navigate">我的活动</navigator>
</li>
</ul>
</view>
</view>
</template>
<script>
</script>
<style scoped>
.head_bg{ width: 100%; height: 304rpx; }
.head_bg image{ width: 100%; height: 304rpx; }
.personal_box_1{ z-index: 1; position: absolute; width: 90%; height: 321rpx; margin: -90rpx 5% 0 5%; background: #fff; box-shadow: 0 4rpx 20rpx 0 rgba(99, 251, 172, 0.35); border-radius: 10rpx; }
.personal_box_1 .user_img{ width: 100%; height: 200rpx; margin-top: -70rpx; text-align: center; font-size: 30rpx; color: #303133; display: inline-block; }
.personal_box_1 .user_img image{ width: 116rpx; height: 116rpx; }
.personal_box_1 ul{ width: 100%; height: auto; padding-top: 10rpx; display: inline-block; }
.personal_box_1 ul li{ width: 33%; float: left; text-align: center; font-size: 28rpx; color: #303133; }
.personal_box_1 image{ width: 80rpx; height: 80rpx; border-radius: 50%; margin-bottom: 23rpx; }
</style>