zoukankan      html  css  js  c++  java
  • 移动端开发案例【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",  项目名称颜色

            },

    最终配置样式

    官网:http://www.lenbor.com
  • 相关阅读:
    Thinking in Java Reading Note(9.接口)
    Thinking in java Reading Note(8.多态)
    Thinking in Java Reading Note(7.复用类)
    SQL必知必会
    Thinking in Java Reading Note(5.初始化与清理)
    Thinking in Java Reading Note(2.一切都是对象)
    鸟哥的Linux私房菜笔记(1.基础)
    Thinking in Java Reading Note(1.对象导论)
    CoreJava2 Reading Note(2:I/O)
    CoreJava2 Reading Note(1:Stream)
  • 原文地址:https://www.cnblogs.com/lenbor/p/12549446.html
Copyright © 2011-2022 走看看