uni-app自定义页面导航内容

在小程序中想自定义顶部导航的内容

此案例前端使用vue和uni-app

首先在page.json配置文件中打开自定义导航,如图

HTMl直接撸代码

<template>
   <view class="content">
       <view :style="{ height: top }" class="top-sty"></view>
       <view class="header" :style="{height:height,'line-height':height}">
           <view class="top-image">
               <image :src="'../../static/reback.png'"
                   :style="{height:iconHeight,width:iconHeight,'margin-left':marginNum}"></image>
               <text>物品出库</text>
           </view>
       </view>
       <view class="user" :style="{margin:marginNum}">
           <view class="u-l">
               <image :src="imgHead"></image>
               <view class="u-l-r">
                   <text class="username">物品申请人</text>
                   <view class="tag-view">
                       <text class="username">懒猫</text>
                   </view>
               </view>
           </view>

</view>
   </view>
</template>
<script>
   export default {
       data() {
           return {
               top: 0,
               height: 0,
               iconHeight: 0,
               marginNum: 0,
               pageWith: 0,
               imgHead: 'https://weixiu.oubamall.com/resource/images/wx-ico.png',
           }
       },
       onLoad() {
           var that = this;
           uni.getSystemInfo({
               success: function(res) {
                   that.pageWith = parseInt(res.windowWidth)
               }
           });
           const info = uni.getMenuButtonBoundingClientRect()
           that.top = info.top + 'px';
           that.height = info.height + 'px';
           that.iconHeight = info.height / 2 + 'px';
           that.marginNum = (that.pageWith - info.right) + 'px'
       },


       methods: {

}
   }
</script>
<style lang="scss">
   page {
       background: #F9FDFF;
   }
   .content {
       background-image: linear-gradient(150deg, #3F71F4, #3E9FF2, #3F9EF5);
       font-family: PingFang SC;
       position: absolute;
       left: 0;
       top: 0;
       width: 100%;
       z-index: 1001;
       .top-sty {
           width: 100%
       }
       .header {

.top-image {
               display: flex;
               flex-direction: row;
               align-items: center;
               justify-content: left;
               justify-items: center;
               text {
                   color: #FFFFFF;
                   font-size: 16px;
                   margin-left: 10px;
               }

}

}
   }
   .user {
       display: flex;
       flex-direction: row;
       justify-content: space-between;
       align-items: center;
       height: 130rpx;
   }

.user .u-l {
display: flex;
}

.user .u-l image {
       width: 80rpx;
       height: 80rpx;
       border-radius: 50%;
       border: 5rpx solid #fff;
   }

.user .u-l .u-l-r {
       margin-left: 20rpx;
       color: #ffffff;
   }

.user .u-l .username {
       font-size: 30upx;
       font-weight: bold;
       color: #ffffff;
   }

</style>

效果

自定义导航就成功了

uni-app自定义页面导航内容相关推荐

uni app 手机端导航栏自定义
uni app 手机端导航栏自定义第一步:明确顶部导航栏的构成(手机自带的顶部菜单+开发的顶部菜单栏) 获取手机自带的顶部导航栏 <view class="navigation_ba ...
uniapp实战项目（仿知识星球App) - - 自定义顶部导航栏和登录弹窗组件
实战项目名称:仿知识星球App 技术栈:前端 => uni-app ( 后端:Node.js + Mysql + Apollo + Graphql ) 已实现功能:微信登录,创建星球,内容管理, ...
uni app 自定义头部组件（2）局部右侧按钮
上一篇为完全的自定义头部链接:https://blog.csdn.net/qq_37403179/article/details/102955419 本片则是使用uniapp已有的自定义方法给头部添 ...
uniAPP 自定义页面导航烂 - 搜索 APP有效
这里自定义的是页面的一个导航栏啊 ,所以会覆盖掉全局的一个导航栏: pages.json 里面设置 pages 中的页面,, stayle 中的页面属性 app-plus: appp ...
切换 uniapp_万能前端框架uni app初探03：底部导航开发
前言本节我们使用uni app的底部导航功能,点击不同tab会显示不同页面,这个功能在实际项目开发中几乎是必备的. 一.基础知识 1.tabBar 如果应用是一个多 tab 应用,可以通过 tabB ...
利用循环栏目导航标签及自定义页面制作帝国CMS网站地图
网站地图,又称站点地图,它就是一个页面,上面放置了网站上所有页面的链接.也简洁地表现了网站栏目关系,一般就包含顶级栏目和二级栏目.搜索引擎蜘蛛非常喜欢网站地图.在帝国CMS中没有生成网站地图的功能,所 ...
HTML实现点击阅读导航，跳转到页面这个内容的开始部分。
1.相信大家上网的时候可能都用过点击一个页面的导航里的内容,然后页面会直接上下拖动到我们想看的文章的开始地方.那么这样的效果是怎么实现的,今天饿哦就和大家一起来分享. 2.第一我们要跳转到指定内容,那 ...
uni app页面传值
传值是很常见的知识点,刚开始接触uni app总会踩到很多传值的坑,不是这里传不过去,就是那边接收不到,以下是我遇到过的一些传值方式,实在不行,咱就一个一个试,总有一个能"干起". ...
uni app页面跳转后，刷新页面参数丢失问题
正常页面路由跳转地址应该是这样的:http://localhost:8080/#/pages/study/hiring?id=1393112968202870785 浏览器刷新之后就编程这样子:htt ...

uni-app自定义页面导航内容

uni-app自定义页面导航内容相关推荐

最新文章

热门文章