配置导航栏和tabbar

2022-08-12  本文已影响0人  冰点雨

导航栏

{
            "path": "pages/index/index",
            "style": {
                "navigationBarTitleText": "百年奥莱",
                "navigationBarBackgroundColor":"#FFFFFF",
                "app-plus":{
                                        "scrollIndicator": "none"//隐藏该页面滚动条
                    "titleNView":{
                        "buttons":[
                            {
                                "float": "left",
                                "fontSrc": "./static/iconfont.ttf",
                                "text": "搜索"
                                
                            },
                            {
                                "float": "right",
                                "fontSrc": "./static/iconfont.ttf",
                                "text": "消息"
                            }
                        ]
                    }
                }
            }
        }

自定义导航栏

page.json中的配置项

"navigationStyle":"custom",

页面中给小程序自定义导航栏

<!-- #ifdef MP-WEIXIN -->
        <view class="wx-nav">
            <view class="iconfont">搜索</view>
            <text>百年奥莱</text>
            <view class="iconfont">消息</view>
        </view>
        <!-- #endif -->

<style>
    .wx-nav{
        height: 200rpx;
        width: 70%;
        line-height: 200rpx;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
</style>

tabbar

"tabBar": {
        "color": "#7A7E83",
        "selectedColor": "#49BDFB",
        "borderStyle": "black",
        "backgroundColor": "#ffffff",
        "list": [{
            "pagePath": "pages/index/index",
            "iconPath": "static/tabbar/home.png",
            "selectedIconPath": "static/tabbar/home_s.png",
            "text": "首页"
        }, {
            "pagePath": "pages/category/category",
            "iconPath": "static/tabbar/category.png",
            "selectedIconPath": "static/tabbar/category_s.png",
            "text": "分类"
        }, {
            "pagePath": "pages/shopcar/shopcar",
            "iconPath": "static/tabbar/shopcar.png",
            "selectedIconPath": "static/tabbar/shopcar_s.png",
            "text": "购物车"
        }, {
            "pagePath": "pages/my/my",
            "iconPath": "static/tabbar/my.png",
            "selectedIconPath": "static/tabbar/my_s.png",
            "text": "我的"
        }]
    }
上一篇下一篇

猜你喜欢

热点阅读