不用学习直接编写uni-app(导航栏自定义样式及相关问题)

1、自定义导航栏样式可以在文件中定义,格式如下:

    "pages" : [{

        "path" : "pages/index/index", //默认在index.vue中添加按钮

        "style" : {

            "navigationBarTitleText" : "XXXXX", //标题名

            "titleNView": {

                "backgroundcolor": "red",

                "titletext": "iflower",

                "titlecolor": "#000000",

                "buttons": [{ //添加自定义按钮入口

                   //此处引用阿里图标库图标//(请参考https://www.jianshu.com/p/5347eabff1e4)

                    "text": "\ue609",

                    "fontSrc": "/static/font/iconfont.ttf",

                    "fontSize": "22px",

                    "float": "left", //靠左第一个

                    "id":"leftMenu" //自定义字段,用于以后对按钮事件处理

                },{

                    "text": "\ue639",

                    "fontSrc": "/static/font/iconfont.ttf",

                    "fontSize": "22px",

                    "float": "right", //靠右第一个

                    "id":"xiaoxi",

                    "redDot":true //默认图标按钮右上角有红色点状标志

                },{

                    …… //其他按钮配置

                }]

            }

        }

    },{

        …… //其他页面配置

    }]

2、配置好界面,导航栏效果如下

    ​不用学习直接编写uni-app(导航栏自定义样式及相关问题)_第1张图片

3、在index.vue页面添加导航栏按钮click监听事件

    在

你可能感兴趣的:(uni-app开发)