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