一.构建项目页面
1.配置app.json文件,并配置页面路径
2.设置导航栏样式。
二.首页结构
1.构建首页结构
2.设置首页背景样式
三.新建banner组件
1.在index文件夹中新建一个banner文件夹
2.配置banner.json文件
3.在index.json中引入当前组件路径
4.同以上相同操作创建entrance文件
四.完成轮播图组件
1.遍历bannerList,进行图片轮播
2.在banner.scss中设置轮播图样式
五.完成entrance组件
1.构建导航区域
2.设置图标样式
样式为下图
六.广告区域编写
1.在index.wxml中完成广告区域架构
2.在index.scss中完成广告区域样式
7.商品列表区域编写
1.注册goods-card和goods-list组件。
在miniprogram中创建components文件夹,并在其创建goods-card和goods-list文件夹
2.在goods-card.json中注册引用组件
3.在goods-list.wxml中进行商品介绍编写
完成后如图所示:
八.分类页面编写
1.在page/category/category.html中编写分类页面样式
<!--pages/category/category.wxml-->
<view>
<view class="category-container">
<!-- 左侧的滑动区域 -->
<scroll-view class="category-left-view" scroll-y="">
<view class="left-view-item active">爱礼精选</view>
<view class="left-view-item">鲜花玫瑰</view>
<view class="left-view-item">永生玫瑰</view>
<view class="left-view-item">玫瑰珠宝</view>
</scroll-view>
<!-- 右侧的滑动区域 -->
<scroll-view class="category-right-view" scroll-y="">
<view class="test">
<view wx:for="{{ 10 }}" wx:key="index" class="right-view-item">
<navigator url="" class="navigator">
<image src="../../assets/images/cate-1.png" mode="" />
<text class="goods_item_name">真情告白</text>
</navigator>
</view>
</view>
</scroll-view>
</view>
</view>
2.在category.scss中完成样式编写
/* pages/category/category.wxss */
.category-container{
display: flex;
.category-left-view{
width: 220rpx;
background-color:white;
height: 100vh;
.left-view-item{
font-size: 26rpx;
// 文本排列
text-align: center;
line-height: 99epx;
}
.active{
color: #f3514f;
// &表示当前标签
// ::before是伪元素标签
&::before{
content:"";
width: 6rpx;
height: 66rpx;
background-color: #f3514f;
display: block;
position: absolute;
// 沿着Y轴平移
transform: translateY(25%);
}
}
}
.category-right-view{
<!--
&::(伪元素)
所谓“伪元素”,就是在DOM结构中本来不存在的,但是通过CSS创建出来的元素
::before ::after
用于向指定元素的前面或者后面加入特定的内容
-->
&::before{
content: "";
width: 6rpx;
height: 100vh;
background-color: #f3514f;
display:block;
position: absolute;
}
.right-view-item{
width: 33%;
float: left;
margin-top: 30rpx;
.navigator{
display: flex;
flex-direction: column;
align-items: center;
}
.goods_item_name{
font-size: 26rpx;
margin-top: 18rpx;
}
}
}
image{
width: 90rpx;
height: 90rpx;
}
}
完成样式如下