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

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>

案例实例图

目录结构

前端目录结构

• 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