uniapp自定义的下面导航

uniapp自定义的下面导航

看看效果图片吧

前言

在工作中需要自定定义好看一点的头部和导航栏下面

一、写组件、我这里就没有写组件了直接写了一个页面？

<!-- 内部沟通 -->
<template><view style="display: flex; flex-direction: column; align-items: flex-start; justify-content: center;"><!-- 头部 --><view style="width: 100%; height: 7rem; background-color: #1B3357;"><headassembly @otherMiniProgram="OnOtherMiniProgram":imageSrc="'https://linda-uni.oss-cn-guangzhou.aliyuncs.com/images/workbench_tu/leftarrowgz.svg'":isSubPage="false"></headassembly></view><!-- 中间内容区域 --><view class="content" :key="currentTab"><view v-if="currentTab === 'tab1'"><view style="width: 100%;"><view style="width:100%; background-color: #FFFFFF;border-radius: 5px;margin-top: 1rem;"><view class="top"><image class="avatar_home"src="https://linda-uni.oss-cn-guangzhou.aliyuncs.com/images/workbench_tu/pexels-hannah-nelson-390257-1065084.jpg"mode="aspectFill"></image><view class="text-container"><view class="name-row"><view class="name_home">张莉莉</view><view class="tag">老板</view></view><view class="name_date">2小时前</view></view></view><view class="nie"><view style="width: 100%;"><mp-html :copy-link="true" :tagStyle="md.tagStyle" :markdown="true" :lazy-load="true":selectable="true" :content="html" /></view></view><view class="top_z"><image class="avatar_home_z"src="https://linda-uni.oss-cn-guangzhou.aliyuncs.com/images/workbench_tu/pexels-divinetechygirl-1181686.jpg"mode="aspectFill"></image><view class="text-container_z"><viewstyle="background-color: #EEEEEE;height: 1.8rem;width: 100%;border-radius: 15px;font-size: 12px;color: #B8B8B8;"><view style="padding: 0.4rem;" @click="OnShowComments()">参与评论</view></view></view></view><view class="horizontal-containerBOdy"><view class="horizontal-container"><view class="label">李思思:</view><view class="message">收到</view></view><view class="horizontal-container"><view class="label">杰哥:</view><view class="message">我要去！给我去</view></view><view class="horizontal-container"><view class="label">李白:</view><view class="message">我也要去！</view></view><view class="horizontal-container"><view class="label">悟空:</view><view class="message">俺老孙去打下手</view></view></view><view style="width: 94%; height: height: 76px;"></view></view><!-- 二 --></view></view><view v-if="currentTab === 'tab2'"></view><view v-if="currentTab === 'tab3'"><view style="width: 100%;"><view style="width: 100%; border-radius: 5px; margin-top: 1rem;"><view class="addressbook-container"><view class="person-item" v-for="person in people" :key="person.id"><image :class="['avatar_homeAddressbook', { online: person.online }]":src="person.image" mode="aspectFill"></image><view class="text-containers"><view class="name_homeAddressbook">{{ person.name }}</view><view class="tagAddressbook">{{ person.role }}</view></view></view></view></view></view></view></view><van-popup @close="OnComments" :show="showInputcomments" round position="bottom"><view style="width: 95%; height: 27rem;"><view class="popup-header"><view class="popup-title">发布评论</view><view class="popup-complete" @click="onSubmitComments">完成</view></view><view style="height: 26rem;width: 100%;margin-left: 0.6rem;"><textarea class="comment-textarea" v-model="comment" placeholder="请输入评论..."></textarea></view></view></van-popup><!-- 底部导航栏 --><view class="footer"><view class="icon-container" @click="changeTab('tab1')"><image:src="currentTab === 'tab1' ? 'https://linda-uni.oss-cn-guangzhou.aliyuncs.com/images/workbench_tu/information_1.svg' : 'https://linda-uni.oss-cn-guangzhou.aliyuncs.com/images/workbench_tu/information_0.svg'"class="icon"></image><view class="icon-label">首页</view></view><!-- 发布按钮凹槽 --><view class="publish-container"><view class="publish-button" @click="handlePublishClick"><image:src="currentTab === 'tab2' ? 'https://linda-uni.oss-cn-guangzhou.aliyuncs.com/images/workbench_tu/release_1.svg' : 'https://linda-uni.oss-cn-guangzhou.aliyuncs.com/images/workbench_tu/release_1.svg'"class="icons"></image></view></view><view class="icon-container" @click="changeTab('tab3')"><image:src="currentTab === 'tab3' ? 'https://linda-uni.oss-cn-guangzhou.aliyuncs.com/images/workbench_tu/Addressbook1.svg' : 'https://linda-uni.oss-cn-guangzhou.aliyuncs.com/images/workbench_tu/Addressbook_0.svg'"class="icon"></image><view class="icon-label">通讯录</view></view></view></view>
</template><script>import mpHtml from '@/components/mp-html/mp-html.vue'import md from '@/static/css/md';export default {computed: {md() {return md}},components: {mpHtml},destroyed() {this.mediaQueryOb.disconnect() //组件销毁时停止媒体查询监听this.mediaQueryOb = nullconsole.log('==== destroyed :')},onShow() {console.log("每次查询");},data() {return {show_tu: false,people: [{id: 1,name: '张莉莉',role: '老板',image: 'https://linda-uni.oss-cn-guangzhou.aliyuncs.com/images/workbench_tu/pexels-hannah-nelson-390257-1065084.jpg',online: true},{id: 2,name: '李四',role: '经理',image: 'https://linda-uni.oss-cn-guangzhou.aliyuncs.com/images/workbench_tu/pexels-hannah-nelson-390257-1065084.jpg',online: false},{id: 3,name: '王五',role: '员工',image: 'https://linda-uni.oss-cn-guangzhou.aliyuncs.com/images/workbench_tu/pexels-hannah-nelson-390257-1065084.jpg',online: true},{id: 4,name: '赵六',role: '实习生',image: 'https://linda-uni.oss-cn-guangzhou.aliyuncs.com/images/workbench_tu/pexels-hannah-nelson-390257-1065084.jpg',online: false},// 添加更多的人员信息],comment: '',showInputcomments: false,editorIns: null,readOnly: false,toolbarConfig: {excludeKeys: ['direction', 'date', 'lineHeight', 'letterSpacing', 'listCheck'],iconSize: '20px',iconColumns: 10,icons: [{name: 'save',title: '保存',onClick: () => this.saveContent()},]},mediaQueryOb: null, // 响应式媒体查询show_fab: false,currentTab: 'tab1',isFirstTab2: true,html: `<p> 今天唐僧过来，赶紧安排人去接待! 好家伙了 把他接过来、 念佛、 快点 由世界品牌实验室(World Brand Lab)主办的(第十六届)“世界品牌大会”在北京举行，会上发布了2019年《中国500最具价值品牌》分析报告。在这份基于财务数据、品牌强度和消费者行为分析的年度报告中， </p><p><img src="https://img.yzcdn.cn/vant/cat.jpeg" width="162" style=""> <img src="https://img.yzcdn.cn/vant/cat.jpeg" width="163" style=""></p>`}},methods: {//通讯录OnOtherMiniProgram() {uni.navigateBack();},changeTab(tab) {if (tab !== 'tab2') {this.currentTab = tab;}},handlePublishClick() {console.log('当前已经是 tab2');this.show_fab = truethis.show_tu = falseuni.navigateTo({url: '/pages/internal/postarticle/postarticle'})},OnshowInthe() {this.show_fab = false},saveContent() {this.editorIns.getContents().then((content) => {console.log('保存内容:', content.html);});},//显示输入评论OnShowComments() {this.comment = '';this.showInputcomments = true},OnComments() {this.comment = '';this.showInputcomments = false},onSubmitComments() {console.log("测试了", this.comment);this.showInputcomments = false},}}
</script>
<style src="./styles.css"></style>

上方代码直接赋值可运行 有些头部哪个我没有弄进来
哪个很简单

总结

目前感觉还是很简单的可以自己也可以在优化一下