欢迎您光临深圳塔灯网络科技有限公司!
电话图标 余先生:13699882642

网站百科

为您解码网站建设的点点滴滴

小程序自定义顶部导航栏

发表日期:2019-11 文章编辑:小灯 浏览次数:37

实现的前提

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>

本页内容由塔灯网络科技有限公司通过网络收集编辑所得,所有资料仅供用户参考了本站不拥有所有权,如您认为本网页中由涉嫌抄袭的内容,请及时与我们联系,并提供相关证据,工作人员会在5工作日内联系您,一经查实,本站立刻删除侵权内容。本文链接:http://dengtar.com/25189.html
将文章分享到..
相关小程序
 八年  行业经验

多一份参考,总有益处

联系深圳网站公司塔灯网络,免费获得网站建设方案及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

业务热线:余经理:13699882642

Copyright ? 2013-2018 Tadeng NetWork Technology Co., LTD. All Rights Reserved.