UNIAPP实战项目笔记29 购物车设置自定义导航栏

电玩女神 2024-04-01 11:44 87阅读 0赞

### UNIAPP实战项目笔记29 购物车设置自定义导航栏 ###

#### 重点代码两部分 page.json 和 shopcart.vue ####

*  page.json

{
        
                "path" : "pages/shopcart/shopcart",
                "style" :                                                                                    
                {
        
                    "app-plus": {
        
                        "titleNView": false,
                        "scrollIndicator": "none"
                    }
                }
            }

*  shopcart.vue

<template>
        <view>
            
            <uniNavBar
                title="购物车"
                :rightText=" isNavBar ? '完成' : '编辑'"
                fixed="true"
                statusBar="true"
                @clickRight=" isNavBar = !isNavBar"
            ></uniNavBar>
        </view>
    </template>
    
    <script>
        import uniNavBar from '@/components/uni/uni-nav-bar/uni-nav-bar.vue'
        export default {
        
            data() {
        
                return {
        
                    isNavBar:false
                }
            },
            components:{
        
                uniNavBar
            },
            methods: {
        
                
            }
        }
    </script>
    
    <style>
    
    </style>

#### 案例实例图 ####

![购物车设置自定义导航栏][8fd58d0eb41a4e5583f7d984643a6bf6.png]

#### 目录结构 ####

##### 前端目录结构 #####

*  manifest.json 配置文件： appid、logo…
 *  pages.json 配置文件： 导航、 tabbar、 路由
 *  main.js vue初始化入口文件
 *  App.vue 全局配置：样式、全局监视
 *  static 静态资源：图片、字体图标
 *  page 页面
    
     *  index
        
         *  index.vue
     *  list
        
         *  list.vue
     *  my
        
         *  my.vue
     *  search
        
         *  search.vue
     *  search-list
        
         *  search-list.vue
     *  shopcart
        
         *  shopcart.vue
     *  details
        
         *  details.vue
 *  components 组件
    
     *  index
        
         *  Banner.vue
         *  Hot.vue
         *  Icons.vue
         *  indexSwiper.vue
         *  Recommend.vue
         *  Shop.vue
     *  common
        
         *  Card.vue
         *  Commondity.vue
         *  CommondityList.vue
         *  Line.vue
         *  ShopList.vue
     *  uni
        
         *  uni-number-box
            
             *  uni-number-box.vue
         *  uni-icons
            
             *  uni-icons.vue
         *  uni-nav-bar
            
             *  uni-nav-bar.vue
 *  common 公共文件：全局css文件 || 全局js文件
    
     *  api
        
         *  request.js
     *  common.css
     *  uni.css

[8fd58d0eb41a4e5583f7d984643a6bf6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/6442be5e18f24278993b36ddd53357cf.png