美文网首页
配置导航栏和tabbar

配置导航栏和tabbar

作者: 冰点雨 | 来源:发表于2022-08-12 14:32 被阅读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": "我的"
            }]
        }
    

    相关文章

      网友评论

          本文标题:配置导航栏和tabbar

          本文链接:https://www.haomeiwen.com/subject/hphtgrtx.html