小程序自定义顶部导航栏

实现的前提

1.首先查看文档,看文档里关于自定义导航栏是怎么规定的,有哪些限制;还有小程序自定义导航栏全局配置和单页面配置的微信版本和调试库的最低支持版本。
2.在app.json window 增加 navigationStyle:custom ,顶部导航栏就会消失,只保留右上角胶囊状的按钮,如何修改胶囊的颜色呢;胶囊体目前只支持黑色和白色两种颜色 在app.josn window 加上 "navigationBarTextStyle":"white/black"。

实现的步骤

1.自定义导航栏文本,是否显示返回,是否显示返回首页,导航栏高度;
2.statusBarHeight,用来获取手机状态栏的高度,调用wx.getSystemInfo获取,navigationBarHeight+默认的高度,这个是设定整个导航栏的高度;
3.还有注意的,在写样式距离和大小时建议都用px,因小程序右边的胶囊也是用的px,不是rpx;
4.因为自定义导航栏每个页面都要写,所以把导航栏封装了公共组件,这样只需要在每个页面引入即可。

1.效果图

图片描述

2.组件结构navbar.wxml

<view class="custom" style="padding-top:{{ statusBarHeight }}px; background: {{ bg }};">
    <view class='title-container'>
        <view class='capsule' wx:if="{{ back || home }}">
            <view bindtap='back' wx:if="{{back}}">
                <label class='iconfont icon-back'></label>
            </view>
            <view bindtap='backHome' wx:if="{{home}}">
                <label class='iconfont icon-home'></label>
            </view>
        </view>
        <view class='title'>{{ navigationBarTitle }}</view>
    </view>
</view>
<view class="empty_custom" style="padding-top:{{ statusBarHeight }}px;"></view>
这里有个需注意的问题,就是一般会出现自定义导航栏,下拉页面,导航栏也随着会下拉,这种问题是因为设置fixed后页面元素整体上移了navigationBarHeight,所以在此组件里设置一个空白view元素占用最上面的navigationBarHeight这块高度

3.组件样式navbar.wxss

.custom{
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    height: 45px;
    background: #1d8be8;
    z-index: 999;
}

.title-container {
    height: 44px;
    display: flex;
    align-items: center;
    position: relative;
}

.capsule {
    margin-left: 10px;
    height: 32px;
    border-radius: 16px;
    display: flex;
    align-items: center;
}

.capsule > view {
    width: 32px;
    height: 60%;
    position: relative;
}

.capsule image {
    width: 60%;
    height: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

.title {
    color: white;
    position: absolute;
    left: 104px;
    right: 104px;
    font-size: 14px;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
@font-face {font-family: "iconfont";
  src: url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAPEAAsAAAAAB9AAAAN1AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgqDOIJoATYCJAMMCwgABCAFhG0HNRutBsiOw7ixa964mMQePKTt28smJyKGmFT8Q007E6+gYmbv2c9NxOK1mSAu/ct90xvvERKJkFbBQ9SQiZSykDDgcvxfic+zLJcxF82tCwOMAwps7EFWIAF5IKmg13SCL66HAMzxJhJRWHx46YmgcLsJQAwbLDKeSMWIGsgXmCIw7hirEIsxwlSbo90EFiWfFz+IF6agYSRxN6odsMV7Vj9bfnaVBt1Ap+zGsJ0dkCeBBCIBBaJHp7MVfxaJRGJuKgPD6cYoBNpWfl2HRGipjS/6w9NAGOPmWgIQiqgGny0DDgR8dr0ADQAJgDGggHnAOtAc55OI2EZhPHZvePbK0t7puQ+Oocs//bu/OJ5fbNTWOK14tLAQmx6kWJy454XFPI9VIyEfN+8N79291rl5ZfjF5b3f4fUr9zp7+x/cnJuZ2Zi5u9a4+3zg6cLyiqG+4tFl3rPLqua+hUsr+35i3bsLGq56nrcjyGnF656wC0tkq68olhTVCf9uJETHwCseL1/182Pqx/Kprd3/8/6v/51/cf1FXO+63XuTX8cH2l4/ZjZxcfDiO7Njl73fz+ljPq25cn3l5ummtsSV2QMHjH3JY5X/V7QmrsBAZP+AsqK/8Ss629b5pFXRTwu3gJU79yxbxk2NnXiU2T4Yq/n+eXF1zq/fvq+tzs4+9ce3d/OzXd7Ejwmnbx227L9mZl9ruDnlgb4kas8v86Lm9MID6AYlZHfik4nS8LO+wykV59DTJvOvqYUC4NmosilIppsxvRWXgF9ToABdV0LRwCplCAOh45bMuE27BuArHnRcrz2vl6udJueCwBSnAhomeEFiSiChaJEwwoJEGGNKDsyJoGSUBQ6MwY9QZkD4hQSAwJZD0LDmEiS23CIU7RWMcOYXjLEVEuY0C4c5LQgWg80LxiBDyEOfyTC4r2kIvoViaf45ikONccqShH6Njiv7IS46th7fQQOdLQaMnSAOxo0TYMAYU4di2gw1zYRRY0wFOeoMGkfWfEzMgK4XdfqO1D0xCnBAGAiEB+jDLcBgOEwMhKg6EWu8/xxEZIgGgzNQ1uS+BnFwkesH4ogmdgKxozQmlb3KJWO5QWTAOAgBYAAOJjpAMdkRzYuYAKO6WykgHESHQQtCFvPEcKUBU5Wd49X6860BzHGXkkITUijUoJE6Bvr05lSPBwAAAA==') format('woff2');
}
.iconfont {
    font-family: "iconfont" !important;
    font-style: normal;
    color: #fff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.icon-home:before { content: "\e60c"; }
.icon-back:before { content: "\e618"; }

4.设置组件参数navbar.json

{
    "component": true,
    "usingComponents": {}
}

5.组件navbar.js

Component({
    // 组件的属性列表
    properties: {
        //  导航文字
        navigationBarTitle: {
            type: String,
            value: ''
        },
        // 返回上一页
        back: {
            type: Boolean,
            value: false
        },
        // 返回首页
        home: {
            type: Boolean,
            value: false
        },
        // 背景色
        bg: {
            type: String,
            value: ''
        }
    },
    // 组件的初始数据
    data: {
        // 获取状态栏的高度statusBarHeight
        statusBarHeight: wx.getSystemInfoSync()['statusBarHeight']
    },
    // 组件的方法列表
    methods: {
        // 返回首页
        backHome: function () {
            wx.reLaunch({
                url: '/pages/study/study',
            })
        },
        // 返回上一页
        back: function () {
            wx.navigateBack({
                delta: 1
            })
        }
    }
})

6.调用组件的页面.json

{
    "usingComponents": {
        "navBar": "/component/navbar/navbar"
    },
    // navigationStyle可以统一配置在app.json中
    "navigationStyle": "custom"
}

7.调用组件的页面.wxml

<navBar back home navigationBarTitle="测试结果" bg="rgb(138,103,255)"></navBar>

努力可以改变能力

266 声望
8 粉丝
0 条评论
推荐阅读
mysql查询数据时自动生成序号
方法一,声明一个外部变量,每行数据为它自增。 {代码...} 方法二,使用(@i:=@i+1) {代码...}

前端小菜阅读 324

使用taro+canvas实现微信小程序的图片分享功能 | 京东云技术团队
二轮充电业务中,用户充电完成后在订单详情页展示订单相关信息,用户点击分享按钮唤起微信小程序分享菜单,将生成的图片海报分享给微信好友或者下载到本地,好友可通过扫描海报中的二维码加群领取优惠。

京东云开发者2阅读 526

封面图
小程序内参数和扫码参数统一
写小程序的时候都会遇到扫码参数和小程序内跳转参数要分开处理的问题,但实际上参数和处理的方式都是一样的,这里封装一种方法,将扫码参数直接放到options下面,这样就不需要分开独立处理,减少冗余代码增加代码...

海洋饼干1阅读 877

微信小程序归结
是的,在这个框架满天飞的年代,我既然有有幸使用了原生小程序开发项目,除了麻烦些,倒也不是一无所获,耕耘总有收货嘛,写博客本身不是为了炫技还是什么,单纯的是记性不好,有些知识点 自己是花了时间去查找的...

HappyCodingTop1阅读 1.3k

封面图
5 分钟带你小程序入门 [实战总结分享]
微信小程序常常用 4 种文件类型JS 文件JS 在小程序中用于编写页面逻辑和交互效果,可调用 API 接口完成数据请求和处理,也可以使用第三方库和框架。模块化编程:小程序中JS文件可以使用ES6的模块化语法,通过expo...

程序员海军2阅读 498

封面图
基于微信云开发 SayLove 表白墙微信小程序V1.0
后续会继续更新,敬请期待2.0全新版本~欢迎添加右边的微信一起探讨!项目地址:[链接][其他开源项目]租房小程序 [链接]计划助手 [链接]Bug修复更新日历[2021-05-12] 更新说明:【 课设毕设参考专用版本 】针对 昵...

LiangSenCheng阅读 2.1k

基于微信小程序云开发-租房微信小程序-带管理员后台
本项目使用 LGPL-3.0协议,请勿商用、请勿售卖、请勿售卖、请勿售卖,仅适用于学习交流,并且不提供无偿的、 不提供无偿的、 不提供无偿的 维护修改服务(但可提issue)。若直接将本项目用于商用,因本项目带来的...

LiangSenCheng阅读 1.8k评论 1

努力可以改变能力

266 声望
8 粉丝
宣传栏