{5}首页开发-1-1

一、page.json配置

1、配置导航栏

  
  
  
  


   
   
   
   
"style": {

   
   
   
   
    "app-plus":{

   
   
   
   
        "titleNView":{

   
   
   
   
            //搜索框配置

   
   
   
   
            "searchInput":{

   
   
   
   
                "align":"center",

   
   
   
   
                "backgroundColor":"#f7f7f7",

   
   
   
   
                "borderRadius":"4px",

   
   
   
   
                "disabled":true,

   
   
   
   
                "placeholder":"搜索",

   
   
   
   
                "placeholderColor":"#cccccc"

   
   
   
   
            },

   
   
   
   
            "buttons":[

   
   
   
   
                {

   
   
   
   
                    "color":"#000000",

   
   
   
   
                    "colorPressed":"#FFDF34",

   
   
   
   
                    "float":"right",

   
   
   
   
                    "fontSize":"24px",

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

   
   
   
   
                    "text":"\ue604"

   
   
   
   
                },{

   
   
   
   
                    "color":"#ff7e00",

   
   
   
   
                    "colorPressed":"#FFDF34",

   
   
   
   
                    "float":"left",

   
   
   
   
                    "fontSize":"24px",

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

   
   
   
   
                    "text":"\ue606"

   
   
   
   
                }

   
   
   
   
            ]

   
   
   
   
        }

   
   
   
   
    }

   
   
   
   
}

  
  
  
  

二、图文列表样式

三、封装列表样式组件

新建文件components->common->common-list.vue将原有的block中的代码复制到common-list.vue文件在common-list中接受item和index首页中导入common-list组件，import commonList from '@/components/common/common-list.vue'首页注册common-listblock中给common-list组件传值