UNIAPP实战项目笔记44 订单页面顶部选项卡 有数据页面样式布局和无数据页面样式布局

订单页面顶部选项卡

具体内容图片自己替换哈，随便找了个图片的做示例
具体位置见目录结构
通过 v-show 的false 和 true来切换有无数据页面布局

代码 my-order.vue 页面部分

my-order.vue 订单页面布局

flex 样式布局

common.css 文件代码

设置默认样式

/* 全局css *//* 默认字体颜色 */
.f-color{color: #636263;
}
/* 选中字体颜色 */
.f-active-color{color: #40bdfb;
}
/* 背景色 */
.bg-color{background-color: #42b7fb;
}
/* 页面默认背景色 */
.bg-active-color{background-color: #f7f7f7;
}/* 隐藏滑块 */
::-webkit-scrollbar{display: none;width: 0 !important;height: 0 !important;-webkit-appearance: none;background:transparent;
}

my.vue 页面布局

点击订单 跳转到 我的订单页面

pages.json 部分代码

自定义页面标题文字和背景色

{"path" : "pages/my-order/my-order","style" :                                                                                    {"navigationBarBackgroundColor": "#FFFFFF","navigationBarTitleText": "我的订单","enablePullDownRefresh": false}}

实际案例图片

目录结构

前端目录结构

• manifest.json 配置文件： appid、logo…

• pages.json 配置文件： 导航、 tabbar、 路由

• main.js vue初始化入口文件

• App.vue 全局配置：样式、全局监视

• static 静态资源：图片、字体图标

• page 页面

  • index
    • index.vue
  • list
    • list.vue
  • my
    • my.vue
  • my-config
    • my-config.vue
  • my-config
    • my-config.vue
  • my-add-path
    • my-add-path.vue
  • my-path-list
    • my-path-list.vue
  • search
    • search.vue
  • search-list
    • search-list.vue
  • shopcart
    • shopcart.vue
  • details
    • details.vue
  • my-order
    • my-order.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
    • mpvue-citypicker
      • mpvueCityPicker.vue

• common 公共文件：全局css文件 || 全局js文件

  • api
    • request.js
  • common.css
  • uni.css

• store vuex状态机文件

  • modules
    • cart.js
    • path.js
  • index.js