上一章，我们完成了底部导航，本次继续，接下来是首页的布局
?
第一，头部
创建一个文件卡，专门用于放头部
?然后再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;
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ?}
?? ??? ??? ?}
?? ??? ?}
?? ?}
至此，首页完成
?