一.构建项目页面
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中进行商品介绍编写
4.完成样式编写
.goods_cart_container{
width: 350rpx;
margin-top: 18rpx;
background: #fff;
border-radius: 18rpx;
}
.good_img {
width: 100%;
max-height: 360rpx;
border-top-left-radius: 16rpx;
border-top-right-radius: 16rpx;
}
.goods_item_info {
display: flex;
// 更改主轴为纵轴
flex-direction: column;
padding: 10rpx 20rpx;
}
.goods_item_info .goods_item_info_name {
font-weight: 600;
font-size: 30rpx;
line-height: 20px;
// 隐藏溢出
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.goods_item_info .goods_item_info_promo {
padding-top: 20rpx;
padding-bottom: 3px;
font-size: 12px;
color: #71797f;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.goods_item_info_bottom {
display: flex;
line-height: 50rpx;
margin-top: 20rpx;
}
.goods_item_info_bottom .goods_image {
width: 48rpx;
height: 48rpx;
}
.goods_item_info_price {
font-size: 30rpx;
font-weight: bold;
color: #f3514f;
}
.goods_item_info_price .text {
font-size: 24rpx;
padding-right: 4rpx;
font-weight: normal;
}
.goods_item_info_origin_price {
flex: 1;
font-size: 20rpx;
color: #71797f;
text-decoration-line: line-through;
margin-left: 6%;
margin-top: 4rpx;
}
.goods_item_info_origin_price .text {
font-size: 20rpx;
}
5.在goods-list.html中编写商品区域
<view class="goods_container">
<!-- 标题 -->
<view class="goods_title">人气推荐</view>
<!-- 列表区域 -->
<view class="goods_card_list">
<block wx:for="{{ 4 }}" wx:key="index">
<goods-card />
</block>
</view>
<!-- 查看更多 -->
<view class="goods_more">
<navigator url="" class="goods_more_btn">
查看更多
</navigator>
</view>
</view>
6.在goods-list.scss中编写商品区域总体样式
.goods_title {
text-align: center;
font-size: 40rpx;
line-height: 52rpx;
font-weight: bold;
color: #232628;
padding: 20rpx 0 0rpx 0rpx;
}
.goods_card_list {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.goods_card_list::after {
content: '';
width: 350rpx;
}
.goods_more {
margin: 20rpx 0;
}
.goods_more_btn {
display: block;
margin: 0 auto;
background: #ffffff;
border-radius: 20rpx;
height: 40px;
line-height: 40px;
text-align: center;
font-size: 14px;
color: rgba(35,38,40,0.7);
}
完成后如图所示:
八.分类页面编写
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;
}
}
完成样式如下
————————————————
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
原文链接:https://blog.csdn.net/2202_75830286/article/details/136610983