uni-app入门-实战教程-二十四-page.json配置

配置官网详细说明、
https://uniapp.dcloud.io/collocation/pages?id=pages

image.png
image.png
image.png

导航搜索栏属性、


image.png
{
    "pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
        {
            "path": "pages/index/index",
            "style": {
                //"navigationBarTitleText": "uni-app"
                "app-plus":{
                    "scrollIndicator":"none",//隐藏滚动条
                    //标题样式
                    "titleNView":{
                        //搜索框配置
                        "searchInput":{
                            "align":"center",
                            "backgroundColor":"#F7F7F7",
                            "borderRadius":"4px",
                            "placeholder":"提示信息",
                            //提示信息的颜色
                            "placeholderColor":"#CCCCCC",
                            //是否禁止输入
                            "disabled":true
                        },
                    //配置按钮
                    "buttons":[
                        //左边
                        {
                            "color":"#FF9619",
                            //按钮按下的颜色
                            "colorPressed":"#BBBBBB",
                            "float":"left",
                            "fontSize":"22px",
                            "fontSrc":"/static/font/icon.ttf",
                            "text": "\ue603"
                        },
                        //右边
                        {
                            "color":"#000000",
                            "colorPressed":"#BBBBBB",
                            "float":"right",
                            "fontSize":"22px",
                            "fontSrc":"/static/font/icon.ttf",
                            "text": "\ue672"
                        }
                    ]
                    }
                }
            }
        }
        ,{
            "path" : "pages/news/news",
            "style" : {}
        }
        ,{
            "path" : "pages/paper/paper",
            "style" : {}
        }
        ,{
            "path" : "pages/home/home",
            "style" : {}
        }
    ],
    
    /* 全局样式 */
    "globalStyle": {
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "love-magicjuren",
        "navigationBarBackgroundColor": "#ffffff",
        "backgroundColor": "#ffffff"
    },
    /* 导航栏 */
    "tabBar":{
        "color":"#8a8a8a",
        "selectedColor":"#333333",
        "list":[
            {
            "pagePath":"pages/index/index",
            "iconPath":"static/tabBar/index.png",
            "selectedIconPath":"static/tabBar/indexcd.png",
            "text":"首页"
        },
        {
            "pagePath":"pages/news/news",
            "iconPath":"static/tabBar/news.png",
            "selectedIconPath":"static/tabBar/newscd.png",
            "text":"资讯"
        },
        {
            "pagePath":"pages/paper/paper",
            "iconPath":"static/tabBar/page.png",
            "selectedIconPath":"static/tabBar/pagecd.png",
            "text":"聊天"
        },
        {
            "pagePath":"pages/home/home",
            "iconPath":"static/tabBar/me.png",
            "selectedIconPath":"static/tabBar/mecd.png",
            "text":"我的"
        }
        ]
    }
    
}

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • uni-app跨平台框架官方教程 链接:https://ke.qq.com/course/343370 一、框架简...
    Neyo_凉阅读 36,377评论 0 43
  • 一、项目结构介绍 pages.json:配置页面路由、导航条、选项卡等页面类信息,详见。manifest.json...
    移动端_小刚哥阅读 2,965评论 0 4
  • 项目源代码地址:https://github.com/Mstian/wanAndroid (求个star)项目简书...
    Mstian阅读 7,278评论 10 22
  • 写在有道笔记上,uni项目实践,转过来格式不太好看,先做此记录吧。 看了uniapp多端开发,感觉不错,还有模板商...
    YellowPoint阅读 2,434评论 0 1
  • 04-秦文颖 #201900817《自学是门手艺》阅读总结# 17/21 知行三问 【1.印象最深刻的部分】今天所...
    秦文颖阅读 238评论 1 0