uniapp自定义的下面导航

uniapp自定义的下面导航

看看效果图片吧
在这里插入图片描述

文章目录

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


前言


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

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

<!-- 内部沟通 -->
<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>

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


总结

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/344705.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

一文掌握Vue3:深度解读Vue3新特性、Vue2与Vue3核心差异以及Vue2到Vue3转型迭代迁移重点梳理与实战

每次技术革新均推动着应用性能与开发体验的提升。Vue3 的迭代进步体现在性能优化、API重构与增强型TypeScript支持等方面&#xff0c;从而实现更高效开发、更优运行表现&#xff0c;促使升级成为保持竞争力与跟进现代前端趋势的必然选择。本文深度解读Vue3 响应式数据data、生命…

Java Web学习笔记27——对话框、表单组件

常见组件对话框&#xff1a; Dialog对话框&#xff1a;在保留当前页面状态下&#xff0c;告知用户并承载相关操作。 dialogTableVisible: false 默认是不可见的。 在按钮属性中设置为true的意思&#xff0c;点击按钮的时候&#xff0c;才会true&#xff0c;对话框才会显示。 …

idm2024最新完美破解版免费下载 idm绿色直装版注册机免费分享 idm永久激活码工具

IDM 2024破解版重新开发了调度程序和MMS协议支持、重新设计和增强的下载引擎、与所有最新浏览器的独特高级集成、改进的工具栏以及大量其他改进和新功能&#xff0c;这一全新的更新&#xff0c;使得IDM下载器更加完美。值得一提的是&#xff0c;它可以借助油猴浏览器的脚本&…

Linux编译器-gcc或g++的使用

一.安装gcc/g 在linux中是不会自带gcc/g的&#xff0c;我们需要编译程序就自己需要安装gcc/g。 很简单我们使用简单的命令安装gcc&#xff1a;sudo yum install -y gcc。 g安装&#xff1a;sudo yum install -y gcc-c。 我们知道Windows上区分文件&#xff0c;都是使用文件…

ssm610学生社团管理系统+vue【已测试】

前言&#xff1a;&#x1f469;‍&#x1f4bb; 计算机行业的同仁们&#xff0c;大家好&#xff01;作为专注于Java领域多年的开发者&#xff0c;我非常理解实践案例的重要性。以下是一些我认为有助于提升你们技能的资源&#xff1a; &#x1f469;‍&#x1f4bb; SpringBoot…

小熊家务帮day15-day17 预约下单模块(预约下单,熔断降级,支付功能,退款功能)

目录 1 预约下单1.1 需求分析1.1.1 业务流程1.1.2 订单状态 1.2 系统设计1.2.1 订单表设计1.2.2 表结构的设置 1.3 开发远程调用接口1.3.0 复习下远程调用的开发1.3.1 查询地址簿远程接口jzo2o-api工程定义接口Customer服务实现接口 1.3.2 查询服务&服务项远程接口jzo2o-ap…

运维 之 DNS域名解析

前言 我们每天打开的网站&#xff0c;他是如何来解析&#xff0c;并且我们怎么能得到网站的内容反馈的界面呢&#xff1f;那什么是DNS呢&#xff08;DNS&#xff08;DomainNameservice&#xff0c;域名服务&#xff0c;主要用于因特网上作为域名和IP地址相互映射&#xff09;那…

【iOS】MRC下的单例模式批量创建单例

单例模式的介绍和ARC下的单例请见这篇&#xff1a;【iOS】单例模式 目录 关闭ARC环境MRC下的单例ARC下的单例批量创建单例Demo 关闭ARC环境 首先关闭ARC环境&#xff0c;即打开MRC&#xff1a; 或是指定某特定目标文件为非ARC环境&#xff1a; 双击某个类文件&#xff0c;指定…

SpringBoot2+Vue3开发课程审核流程系统

SpringBoot2Vue3开发课程审核流程系统 简介 此系统实现了课程审核全流程功能并使用了Activiti7工作流技术&#xff0c;功能包含&#xff1a;课程管理、用户管理、流程定义、课程审核&#xff08;我的申请、我的代办、我的已办&#xff09; 功能介绍 课程管理 对课程信息的管…

C++的STL 中 set.map multiset.multimap 学习使用详细讲解(含配套OJ题练习使用详细解答)

目录 一、set 1.set的介绍 2.set的使用 2.1 set的模板参数列表 2.2 set的构造 2.3 set的迭代器 2.4 set的容量 2.5 set的修改操作 2.6 set的使用举例 二、map 1.map的介绍 2.map的使用 2.1 map的模板参数说明 2.2 map的构造 2.3 map的迭代器 2.4 map的容量与元…

API测试工具

apifox 微信扫描登录 不推荐&#xff1a; Download Postman

QT creator c动态链接库的创建与调用

QT creator c动态链接库的创建与调用 QT5.15.2 1.创建dll项目 确保两类型选择正确 2.选择MinGW 64-bit 3.点击完成 pro文件参考&#xff1a; QT - guiTEMPLATE lib DEFINES QT_DLL_DEMO_LIBRARYCONFIG c17# You can make your code fail to compile if it uses deprecat…

Flutter 使用ffigen生成ffmpeg的dart接口

Flutter视频渲染系列 第一章 Android使用Texture渲染视频 第二章 Windows使用Texture渲染视频 第三章 Linux使用Texture渲染视频 第四章 全平台FFICustomPainter渲染视频 第五章 Windows使用Native窗口渲染视频 第六章 桌面端使用texture_rgba_renderer渲染视频 第七章 使用ff…

以sqlilabs靶场为例,讲解SQL注入攻击原理【54-65关】

【Less-54】 与前面的题目不同是&#xff0c;这里只能提交10次&#xff0c;一旦提交超过十次&#xff0c;数据会重新刷新&#xff0c;所有的步骤需要重来一次。 解题步骤&#xff1a; 根据测试&#xff0c;使用的是单引号闭合。 # 判断字段的数量 ?id1 order by 3 -- aaa# …

.NET MAUI 了解MVVM

MVVM 模式中有三个核心组件&#xff1a;模型、视图和视图模型。 每个组件的用途不同。 下图显示了这三个组件之间的关系。 视图 视图负责定义用户在屏幕上看到的结构、布局和外观。 理想情况下&#xff0c;每个视图在 XAML 中定义&#xff0c;代码隐藏有限&#xff0c;不包含业…

(论文翻译)Coordinate Attention for Efficient Mobile Network Design(坐标注意力 CVPR2021)

Coordinate Attention for Efficient Mobile Network Design&#xff08;CVPR2021&#xff09; 文章目录 Coordinate Attention for Efficient Mobile Network Design&#xff08;CVPR2021&#xff09;摘要1.引言2.相关工作3.方法&#xff1a;Coordinate Attention3.1.Revisit …

RHEL8/Centos8 install for PXE

PXE介绍 PXE&#xff08;Preboot Execution Environment&#xff09;是预引导执行环境的缩写。它是由Intel设计的&#xff0c;允许客户端计算机通过网络从服务器上加载操作系统镜像。PXE通常用于大规模部署操作系统&#xff0c;例如在企业或学校环境中。 PXE工作流程如下&…

C++ | Leetcode C++题解之第139题单词拆分

题目&#xff1a; 题解&#xff1a; class Solution { public:bool wordBreak(string s, vector<string>& wordDict) {auto wordDictSet unordered_set <string> ();for (auto word: wordDict) {wordDictSet.insert(word);}auto dp vector <bool> (s.…

【el-tooltips改造】Vue实现文本溢出才显示el-tooltip,否则不显示el-tooltips

实现原理&#xff1a; 使用disabled属性控制el-tooltip的content显示与隐藏&#xff1b; 目标&#xff1a; 1行省略、多行省略、可缩放页面内的文本省略都有效。 实现方式&#xff1a; 1、自定义全局指令&#xff0c;tooltipAutoShow.js代码如下&#xff08;参考的el-table中的…

04 架构核心技术之分布式消息队列

本课时的主题是分布式消息队列&#xff0c;分布式消息队列的知识结构如下图。 本课时主要介绍以下内容。 同步架构和异步架构的区别。异步架构的主要组成部分&#xff1a;消息生产者、消息消费者、分布式消息队列。异步架构的两种主要模型&#xff1a;点对点模型和发布订阅模型…