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

Posted 2021-03-04 lenbor

 

全局引入样式

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

接着，创建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",  项目名称颜色         },

 

 

最终配置样式