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">
<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>
上方代码直接赋值可运行 有些头部哪个我没有弄进来
哪个很简单
总结
目前感觉还是很简单的可以自己也可以在优化一下
