UNIAPP实战项目笔记39 我的页面布局

╰半夏微凉° 2024-04-01 19:43 48阅读 0赞

### UNIAPP实战项目笔记39 我的页面布局 ###

my.vue 我的页面布局

> 具体图片自己替换哈，随便找了个图片的做示例

#### 实际案例图片 我的页面布局 ####

![我的页面布局实例截图][ab823cac43904a7bb9aac37e914ff8ec.png]

#### 代码 pages.json部分 ####

> 去掉默认导航栏，改为自定义导航栏

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

#### 核心代码 my.vue部分 ####

<template>
        <view class="my">
            
            <view class="my-header">
                <view class="header-main">
                    <view class="header-config">
                        <image class="config-img" src="../../static/tabbar/list.png" mode=""></image>
                    </view>
                    <view class="header-logo">
                        <image class="logo-img" src="../../static/logo.png" mode=""></image>
                        <view class="logo-name">用户昵称</view>
                    </view>
                </view>
            </view>
            
            <view class="order">
                <view class="order-title">
                    <view class="">我的订单</view>
                    <view class="">全部订单 > </view>
                </view>
                <view class="order-list">
                    <view class="order-item">
                        <image class="order-img" src="../../static/logo.png" mode=""></image>
                        <view class="">待付款</view>
                    </view>
                    <view class="order-item">
                        <image class="order-img" src="../../static/logo.png" mode=""></image>
                        <view class="">待付款</view>
                    </view>
                    <view class="order-item">
                        <image class="order-img" src="../../static/logo.png" mode=""></image>
                        <view class="">待付款</view>
                    </view>
                    <view class="order-item">
                        <image class="order-img" src="../../static/logo.png" mode=""></image>
                        <view class="">待付款</view>
                    </view>
                    <view class="order-item">
                        <image class="order-img" src="../../static/logo.png" mode=""></image>
                        <view class="">待付款</view>
                    </view>
                </view>
                
                <view class="my-content">
                    <view class="my-content-item" v-for="(item,index) in 6">
                        <view class="">
                            我的收藏
                        </view>
                        <view class="">
                            >
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </template>
    
    <script>
        export default {
        
            data() {
        
                return {
        
                    
                }
            },
            methods: {
        
                
            }
        }
    </script>
    
    <style lang="scss">
    .my-header{
        
        background: url("../../static/img/b3.jpg") no-repeat;
        width: 100%;
        height: 400rpx;
    }
    .header-main{
        
        position:relative;
        top: 120rpx;
    }
    .header-config{
        
        position: absolute;
        left: 20rpx;
    }
    .header-logo{
        
        position: absolute;
        left:50%;
        margin-left:-60rpx;
        width: 120rpx;
    }
    .config-img{
        
        width: 40rpx;
        height: 40rpx;
    }
    .logo-img{
        
        width: 120rpx;
        height: 120rpx;
        border:2rpx solid #ccc;
        border-radius: 50%;
        background-color: #FFFFFF;
    }
    .logo-name{
        
        color: #FFFFFF;
        font-size: 30rpx;
        font-weight: bold;
    }
    .order-title{
        
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20rpx;
    }
    .order-list{
        
        padding:20rpx;
        display: flex;
    }
    .order-item{
        
        flex:1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .order-img{
        
        width: 80rpx;
        height: 80rpx;
    }
    .my-content{
        
        margin:20rpx 0;
        padding: 0 20rpx;
    }
    .my-content-item{
        
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20rpx 0;
        border-bottom: 2px solid #ccc;
    }
    </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
 *  store vuex状态机文件
    
     *  modules
        
         *  cart.js
     *  index.js

[ab823cac43904a7bb9aac37e914ff8ec.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/6a94fa7208304ca591cd2d5582e63e22.png