微信小程序

上一章，我们完成了底部导航，本次继续，接下来是首页的布局

 

第一，头部

创建一个文件卡，专门用于放头部

 然后再index.vue中 import引入

import HeaderNav from "../../compents/HeaderNav/HeaderNav.vue"

然后在components: {  HeaderNav  } 引入组件

至此，头部完成，接下来我们要引入数据，声明三个数组分别对应，轮播  分类 优惠活动

data() {
            return { swiperList: [ ],categoryList: [ ],promotion: [ ] }        
        }

再创建一个文件写请求路径

再  import apis from "../../util/apis.js"

在onLoad中请求数据，若成功获取则执行

onLoad() {
            // 请求数据
            uni.request({
                url: apis.mall_list,
                success: (res) => {
                    const data = res.data.data
                    this.swiperList = data.swiperList
                    this.categoryList = data.categoryList
                    this.promotion = data.promotion
                }
            })
        }

数据引入成功后，我们即可开始页面的编写

首先是轮播

 然后是分类和蓝月亮图片

最后是优惠活动 

 加上CSS样式

// 头部iper {
        margin: 0 4%;
        .swiper-item {
            image {
                width: 100%;
                heigjt: 100rpx;
            }
        }
    }

    // 分类
    .category-list {
        width: 92%;
        margin: 0 4%;
        padding: 0 0 30upx 0;
        border-bottom: solid 2upx #f6f6f6;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;

        .category {
            width: 25%;
            margin-top: 50upx;
            display: flex;
            flex-wrap: wrap;

            .img {
                width: 100%;
                display: flex;
                justify-content: center;

                image {
                    width: 11vw;
                    height: 11vw;
                }
            }

            .text {
                margin-top: 16upx;
                width: 100%;
                display: flex;
                justify-content: center;
                font-size: 24upx;        
                    a{
                    color: #3c3c3c;
                    text-decoration: none;
                    }
                    a:hover{
                        color: #1AA034;
                    }
            }
        }
    }

    // 图签（蓝月亮）
    .margin-wrap {
        image {
            width: 92%;
            height: 340upx;
            margin: 0 4%;
        }

    }

    // 优惠活动
    .promotion {
        .text {
            width: 100%;
            height: 60upx;
            font-size: 34upx;
            font-weight: 600;
            margin: 10upx;
        }

        .list {
            width: 100%;
            display: flex;
            justify-content: space-between;

            .column {
                width: 43%;
                padding: 15upx 3%;
                background-color: #ebf9f9;
                border-radius: 10upx;
                overflow: hidden;
                display: flex;
                justify-content: space-between;
                flex-wrap: wrap;

                .top {
                    width: 100%;
                    height: 40upx;
                    display: flex;
                    align-items: center;
                    margin-bottom: 5upx;

                    .title {
                        font-size: 30upx;
                    }
                }

                .left {
                    width: 50%;
                    height: 18.86vw;
                    display: flex;
                    flex-wrap: wrap;
                    align-content: space-between;

                    .ad {
                        margin-top: 5upx;
                        width: 100%;
                        font-size: 22upx;
                        color: #acb0b0;
                    }

                    .into {
                        width: 100%;
                        font-size: 24upx;
                        color: #aaa;
                        margin-bottom: 5upx;
                    }
                }

                .right {
                    width: 18.86vw;
                    height: 18.86vw;

                    image {
                        width: 18.86vw;
                        height: 18.86vw;
                    }
                }
            }
        }
    }

至此，首页完成