uniapp自定义的下面导航

`看看效果图片吧`

文章目录

uniapp自定义的下面导航
- [` 看看效果图片吧` ![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/6aa0e964741d4dd3a58f4e86c4bf3247.png)](# 看看效果图片吧 )
前言
一、写组件、我这里就没有写组件了直接写了一个页面？
总结
前言

在工作中需要自定定义好看一点的头部和导航栏下面
一、写组件、我这里就没有写组件了直接写了一个页面？

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">
								<view
									style="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 = null
			console.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 = true
				this.show_tu = false
				uni.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>
上方代码直接赋值可运行有些头部哪个我没有弄进来
哪个很简单
总结

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