uniapp自定义的下面导航

最新推荐文章于 2024-09-26 11:51:52 发布
最新推荐文章于 2024-09-26 11:51:52 发布
阅读量1.1k 收藏 3
点赞数 10
文章标签： uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45870300/article/details/139548519
版权

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>

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

总结

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

杰哥力挽狂澜
关注
uni-app自定义底部导航栏
xuyan5228的博客
12-06 1879
封装的公共函数--用于获取手机端的安全可视距离(顶部top和底部bottom)
uniapp自定义顶部导航栏
weixin_43242112的博客
08-13 1万+
先上效果图： 下面是实现步骤 一、去掉原生的导航栏 在pages.json中对需要去掉原生顶部导航栏的页面配置中做如下配置： { "path": "pages/index/index", "style": { "navigationBarTitleText": "首页", "navigationBarBackgroundColor":"#1890FF", "navigationBarTextStyle": "white", "navigationStyle":"custom",/
uniapp实现自定义tabBar底部导航栏（中间凸起样式）
qq_52992456的博客
08-02 3657
/ 非微信小程序需隐藏原生tabBar（微信小程序已通过"custom": true配置项隐藏原生tabbar）// 非微信小程序需隐藏原生tabBar（微信小程序已通过"custom": true配置项隐藏原生tabbar）text: '首页',text: '问询',text: '我的',附有vue2/3两种写法，支持h5/app/微信小程序。text: '首页',text: '问询',text: '我的',到这里就基本完成了，
uniapp自定义底部tabBar
最新发布
qq_53024519的博客
09-26 645
在一个非tabbar页面，想要有底部导航效果，故自定义效果，系统原底部导航栏仍在正常使用
uni-app 自定义底部导航栏uni-app-bottom-navigation-master.zip
12-17
uni-app 自定义底部导航栏uni-app-bottom-navigation-master.zip
uniapp里自定义底部导航
weixin_43340308的博客
09-26 1万+
uniapp里自定义底部导航
uniapp自定义底部导航栏
dong123456nbnb的博客
08-22 2270
三、然后在首页引入<view-tabbar tabIndex=0></view-tabbar>，记住tabIndex为0，想要在第二个底部导航页面显示，tabIndex为1，依次类推。// X及以上的异形屏top为44，非异形屏为20。// // 给中间的添加mid-button。//判断中间按钮是否突出显示，奇数or偶数，奇数突出。tabIndex: { //当前选中的tab项。// // 向上取整。"text": "首页""text": "工程""text": "任务"
uniapp：自定义底部导航栏
sunluyi的博客
10-09 1万+
uview>tabbar组件 1、在pages.json中正常定义tabbar逻辑和字段，只需配置tabBar字段list中的pagePath(需以"/"开头)属性即可 "tabBar": { // 设置底部 tab 的表现 "color": "#333333", "selectedColor": "#fa2c19", "borderStyle": "black", "backgroundColor": "#fff", "list": [{ "pagePath": "p.
uniapp-自定义导航栏样式不生效问题(一)
qq_45851435的博客
07-19 4959
刚接触uniapp不久，这是我踩到的最心酸的坑T^T 1.我设置了一个自定义组件，用作导航栏，结果出bug了，如下图： 2.首先，h5端是完全没有问题的，可以正常显示，就是微信开发者工具排版错乱了 3.上百度排查了好久，为什么“uniapp自定义导航栏样式不生效”，“uniapp自定义导航栏需要注意什么” 重心都是在“自定义导航栏”上，结果做了很多无用功。 有一天改样式把 id 改成 class ，它奇迹般的可以了！！！ 下面是在微信小程序性正常显示状态 再次上网搜原因发现，微信小程序对于组件设置id
uni-app 第二讲首页底部导航功能实现
11-01
uni-app 第二讲首页底部导航功能实现.希望大家多多支持我：https://blog.csdn.net/k571039838k
uniapp项目实践总结(五)自定义底部导航栏
Guan'Blog
08-31 451
有时候我们需要定制化的需求，使用默认底部导航栏就不那么容易更改，所以这次使用自定义导航栏。这里使用公共组件的形式自定义导航栏，可能会牺牲一些性能。新建q-tabbar文件夹；新建组件；上次介绍过如何注册和使用全局公共组件，那么就不在需要全局引入了，直接在需要的底部导航页使用组件即可。一般用法监听切换操作// 改变导航console.log("底部导航：", item);current就是当前导航的序号。changeNav获取导航改变的方法。
uniapp自定义顶部导航栏左中右
08-30
在uniapp中，你可以通过自定义顶部标题栏的组件来实现左中右布局。下面是一个简单的示例： ```vue 左边内容 中间内容 右边内容 export default { components: { // 注册自定义头部组件 'custom-...
uniapp 自定义底部导航栏
热门推荐
weixin_50606255的博客
09-02 1万+
在做项目时，经常遇到在现有的框架中无法实现UI图上的样式，比如说将底部导航栏的字体在选中状态下变为渐变色，在浏览器上可以直接修改css样式，但是运行到真机时才发现根本不生效，查阅官方文档才发现app端的根本不支持这些属性更改 下面是我在项目中做底部导航栏的过程 1.首先是用的官方的底部导航栏，具体可以看我的这篇文档https://blog.csdn.net/weixin_50606255/article/details/116270949 在用这个底部导航栏时，就无法更改字体颜色为渐变色（app端）
前端学习（2347）：创建新页面和配置
歌谣的博客
10-04 819
pages.json { "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages { "path" : "pages/message/message", "style" : { "navigationBarTitleText": "信息页", "navigationBarBackgroundColor": "#7FFF00", "h5":{ ..
uniApp自定义tabBar底部导航栏+实现tabBar中间凸起自定义样式
weixin_52830464的博客
05-28 1522
pages.js 添加 "custom": true 属性。
uniapp 自定义写底部导航栏
qq_30405009的博客
08-11 1235
uniapp 自定义写底部导航栏
【uniapp】uview 自定义 tabBar 底部导航栏
花间半盘棋
11-02 1861
切换调用的钩子函数，参数对应下标；在 uview1.x 中，不用在。跳转到对应页面，也需要配置。：对应当前激活的图标；：未激活的文字颜色；：已激活的文字颜色；
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

杰哥力挽狂澜

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值