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>

上方代碼直接賦值可運行 有些頭部哪個我沒有弄進來
哪個很簡單

---

總結

目前感覺還是很簡單的可以自己也可以在優化一下