• UNIAPP实战项目笔记2 创建项目和引入文件 导航开发和顶部开发


    创建项目和引入文件

    首页
    分类页

    字体图标引入

    放大镜,消息,垃圾桶,上箭头,下箭头,购物车
    
    方法: 去iconfont 网站

    1.搜索
    2.加入购物车
    3.加入或新建项目
    4.进入项目下载到本地
    5.解压到static目录iconfont下
    6.app.vue 中style 引入@import '@/static/iconfont/iconfont.css';
    7. 用 class 的方式使用

    导航开发:

    tabbar图标:

    首页,分类,购物车,我的  => 选择 | 未选中
    方法: 去iconfont 网站搜索 下载png
    下载后到 static 目录下 tabbar下,
    改名 index.png,indexSelected.png,my.png,
    mySelected.png,list.png,listSelected.png,shop.png,shopSelected.png
    
    • pages下 新建几个页面
      index,
      list,
      my,
      shopcart
    • pages.json下增加 在globalStyle后面
                "tabBar": {
                    "color": "#636263",
                    "selectedColor": "#636263",
                    "backgroundColor": "#fff",
                    "spacing": "5px",
                    "list": [
                        {
                            "pagePath": "pages/index/index",
                            "iconPath": "static/tabbar/index.png",
                            "selectedIconPath": "static/tabbar/indexSelected.png",
                            "text": "首页"
                        },{
                            "pagePath": "pages/list/list",
                            "iconPath": "static/tabbar/list.png",
                            "selectedIconPath": "static/tabbar/listSelected.png",
                            "text": "分类"
                        },{
                            "pagePath": "pages/shopcart/shopcart",
                            "iconPath": "static/tabbar/shop.png",
                            "selectedIconPath": "static/tabbar/shopSelected.png",
                            "text": "购物车"
                        },{
                            "pagePath": "pages/my/my",
                            "iconPath": "static/tabbar/index.png",
                            "selectedIconPath": "static/tabbar/indexSelected.png",
                            "text": "我的"
                        }
                    ]
                }
    

    顶部开发

    底色:白色
    左侧:放大镜 中间文字 百年奥莱 右侧消息

    文字 : 改 pages.json的navigationBarTitle 为 百年奥莱
    更
    

    改pages.json下的 index 页面:

        {
            "path": "pages/index/index",
            "style": {
                "navigationBarTitleText": "百年奥莱",
                "navigationBarBackgroundColor": "#fff",
                "app-plus": {
                    "titleNView": {
                        /* 使用字体图标时 unicode 字符表示必须 '\u' 开头,如 "\ue123"(注意不能写成"\e123")*/
                        "buttons": [
                            {
                                "float": "left",
                                "fontSrc": "./static/iconfont/iconfont.ttf",
                                "text": "\ue616"
                            },{
                                "float": "right",
                                "fontSrc": "./static/iconfont/iconfont.ttf",
                                "text": "\ue711"
                            }
                        ]
                    }
                }
            }
        }
    
    • 使用字体图标时 unicode 字符表示必须 ‘\u’ 开头,如 “\ue123”(注意不能写成"\e123")
    导航栏不支持小程序,小程序需要使用到自定义导航栏和条件编译来实现
    • 导航栏设置为自定义 “navigationStyle”: “custom”,
      页面加条件编译

        
        
            
            百年奥莱
            
        
        
      
    • index.vue

    
    
    
    
    
    
    
    • list.vue
    
    
    
    
    
    
    
    • pages.json
    {
    	"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
    		{
    			"path": "pages/index/index",
    			"style": {
    				"navigationBarTitleText": "百年奥莱",
                    "navigationBarBackgroundColor": "#fff",
                    // "navigationStyle": "custom",
                    "app-plus": {
                        "titleNView": {
                            /* 使用字体图标时 unicode 字符表示必须 '\u' 开头,如 "\ue123"(注意不能写成"\e123")*/
                            "buttons": [
                                {
                                    "float": "left",
                                    "fontSrc": "./static/iconfont/iconfont.ttf",
                                    "text": "\ue616"
                                },{
                                    "float": "right",
                                    "fontSrc": "./static/iconfont/iconfont.ttf",
                                    "text": "\ue711"
                                }
                            ]
                        }
                    }
    			}
    		}
    	    ,{
                "path" : "pages/my/my",
                "style" :                                                                                    
                {
                    "navigationBarTitleText": "",
                    "enablePullDownRefresh": false
                }
                
            }
            ,{
                "path" : "pages/shopcart/shopcart",
                "style" :                                                                                    
                {
                    "navigationBarTitleText": "",
                    "enablePullDownRefresh": false
                }
                
            }
            ,{
                "path" : "pages/list/list",
                "style" :                                                                                    
                {
                    "navigationBarTitleText": "",
                    "enablePullDownRefresh": false
                }
                
            }
        ],
    	"globalStyle": {
    		"navigationBarTextStyle": "black",
    		"navigationBarTitleText": "uni-app",
    		"navigationBarBackgroundColor": "#F8F8F8",
    		"backgroundColor": "#F8F8F8"
    	},
        "tabBar": {
            "color": "#636263",
            "selectedColor": "#636263",
            "backgroundColor": "#fff",
            "spacing": "5px",
            "list": [
                {
                    "pagePath": "pages/index/index",
                    "iconPath": "static/tabbar/index.png",
                    "selectedIconPath": "static/tabbar/indexSelected.png",
                    "text": "首页"
                },{
                    "pagePath": "pages/list/list",
                    "iconPath": "static/tabbar/list.png",
                    "selectedIconPath": "static/tabbar/listSelected.png",
                    "text": "分类"
                },{
                    "pagePath": "pages/shopcart/shopcart",
                    "iconPath": "static/tabbar/shop.png",
                    "selectedIconPath": "static/tabbar/shopSelected.png",
                    "text": "购物车"
                },{
                    "pagePath": "pages/my/my",
                    "iconPath": "static/tabbar/index.png",
                    "selectedIconPath": "static/tabbar/indexSelected.png",
                    "text": "我的"
                }
            ]
        }
        
    }
    
    
  • 相关阅读:
    在线升级之ICAP,ISP,BIN,HEX,MCS
    【Linux】进程控制 —— 进程替换
    springboot+vue云 农产品中心门户系统
    【lvgl】linux开发板搭建环境
    ARMv8函数传参中的bug!
    VScode SSH无法免密登录
    面试金典--面试题 17.19. 消失的两个数字
    【LeetCode】210. 课程表 II——拓扑排序
    【NLP】word复制指定内容到新的word文档
    完美男人谢安游山玩水风流潇洒,东山再起以一敌十
  • 原文地址:https://blog.csdn.net/gixome/article/details/127026349