移动端开发案例【1】全局样式配置

全局引入样式

  在我们开发的过程中,样式显得十分重要,它是开发者直观的展示,如果开发的产品是本来的形体,那么样式就是装点形体的衣服,很多时候好的样式是可以应用到许多地方,这就决定了样式的反复利用。对开发者来说,反复的敲代码,或者复制修改,是非常浪费时间,也让代码的显得不严谨。这时候,我们就可以把一些公共样式引我们的入口文件里面:
 第一步:需要将公用的样式放在公共样式文件夹下,文件夹位置如图

接着,创建css文件,也如图

第二步:在文件的入口文件引入css样式

只引一次就行,其他页面都可以使用

 

配置tabbar底部导航

代码直接用

"tabBar":{

                 "color":"#000000",   文字颜色

                 "selectedColor":"#08C261",  选中后文字的颜色

                 "borderStyle":"black",  边框

                 "backgroundColor":"#F7F7F7",  背景颜色

                 "list":[

                         {

                                  "iconPath":"static/tabbar/index.png",   //初始图标

                                  "selectedIconPath":"static/tabbar/index-select.png",  //选中后图标

                                  "pagePath":"pages/tabbar/index/index",  对应的页面路由

                                  "text":"交流"    文字

                         },

                         {

                                  "iconPath":"static/tabbar/mail.png",

                                  "selectedIconPath":"static/tabbar/mail-select.png",

                                  "pagePath":"pages/tabbar/mail/mail",

                                  "text":"通讯录"

                         },

                        

                 ]

        }

注意:Tabbar:最少两个,最多五个,效果如图



 

配置globalStyle

"globalStyle": { 

                 "navigationBarTextStyle":  "black",   //颜色 只有这个两种 (black/white)

                 "navigationBarTitleText":  "媒资系统",  //名称项目

                 "navigationBarBackgroundColor":  "#F8F8F8",  背景

                 "backgroundColor":  "#F8F8F8",  项目名称颜色

        },

最终配置样式

猜你喜欢

转载自www.cnblogs.com/lenbor/p/12549446.html