目录
1. 商品导航区域
1.1 添加图片
找到index.wxml文件,找到该文件下的商品导航区域,添加如下代码:
<!-- 商品导航 -->
<view class="good-nav">
<view>
<image src="../../picture/images/cate-1.png" mode=""/>
<text>鲜花玫瑰</text>
</view>
<view>
<image src="../../picture/images/cate-1.png" mode=""/>
<text>鲜花玫瑰</text>
</view>
<view>
<image src="../../picture/images/cate-1.png" mode=""/>
<text>鲜花玫瑰</text>
</view>
<view>
<image src="../../picture/images/cate-1.png" mode=""/>
<text>鲜花玫瑰</text>
</view>
<view>
<image src="../../picture/images/cate-1.png" mode=""/>
<text>鲜花玫瑰</text>
</view>
</view>
代码添加后编辑效果如下:
1.2 更改图片大小
此时该区域不美观,还会将轮播区域图片给覆盖掉,下面我们找到index.scss文件,滑动到最下方,使用<view>组件的image,进行调整图片的大小如下图:
此时的代码片段:
// 商品导航区域
.good-nav{
view {
image{
width: 80rpx;
height: 80rpx;
}
};
}
此时的布局为上下,我们要想给他换成水平可以在父进程中加入:
display: flex;
justify-content: space-between;
显示效果如下:
现在此时的代码片段:
// 商品导航区域
.good-nav{
display: flex;
justify-content: space-between;
view {
image{
width: 80rpx;
height: 80rpx;
}
};
}
1.3 文字和图片呈现上下结构
此时的文字和图片是混搭的,我们要想将其改成上下结构,可以在<view>组件中加入:
display: flex;
flex-direction: column;
展示效果如下:
此时的代码片段:
// 商品导航区域
.good-nav{
display: flex;
justify-content: space-between;
view {
display: flex;
flex-direction: column;
image{
width: 80rpx;
height: 80rpx;
}
};
}
1.4 更改字体大小,增加文字和图片之间的间隙
此时字体过大,明确文字和上方图片太过连接,我们可以在<view>中添加text进行更改字体大小,以及增大间隙:
text{
font-size: 24rpx;
margin-top: 12rpx;
}
完成效果如下:
此时的代码片段:
// 商品导航区域
.good-nav{
display: flex;
justify-content: space-between;
view {
display: flex;
flex-direction: column;
image{
width: 80rpx;
height: 80rpx;
}
text{
font-size: 24rpx;
margin-top: 12rpx;
}
};
}
1.5 图片和文字垂直对齐
在<view>组件中添加:
align-items: center;
使文字和图片对齐,效果如下:
此时的代码片段:
// 商品导航区域
.good-nav{
display: flex;
justify-content: space-between;
view {
display: flex;
flex-direction: column;
align-items: center;
image{
width: 80rpx;
height: 80rpx;
}
text{
font-size: 24rpx;
margin-top: 12rpx;
}
};
}
1.6 更改背景颜色
此时区域的区分不明显,我们在父中将其改为白色:
background-color: #fff;
padding: 20rpx 16rpx;
border-radius: 10rpx;
效果如下:
此时的代码片段:
// 商品导航区域
.good-nav{
display: flex;
justify-content: space-between;
background-color: #fff;
padding: 20rpx 16rpx;
border-radius: 10rpx;
view {
display: flex;
flex-direction: column;
align-items: center;
image{
width: 80rpx;
height: 80rpx;
}
text{
font-size: 24rpx;
margin-top: 12rpx;
}
};
}
1.6 本节完整代码
index.wxml:
<!-- view 小程序提供的容器组件,可以当成div使用-->
<!-- 轮播图区域 -->
<view class="swiper">
<!-- swiper:滑块视图容器,其中只能放置 swiper-item 组件 -->
<!-- autoplay实现轮播图的自动切换 -->
<!-- interval切换时间 -->
<!-- indicator-dots下方小圆点 -->
<!-- circular循环 -->
<!-- indicator-color小圆点颜色 -->
<!-- indicator-active-color激活小圆点颜色 -->
<swiper
autoplay
interval="2000"
indicator-dots
circular
indicator-color="#fff"
indicator-active-color="#f3514f"
>
<!-- swiper-item: 只可放置在 swiper 组件中,宽高自动设置为100%,代表swiper 中的每一项 -->
<swiper-item>
<image
src="../../picture/traffic/banner-1.jpg"
mode=""
/>
</swiper-item>
<swiper-item>
<image
src="../../picture/traffic/banner-2.jpg"
mode=""
/>
</swiper-item>
<swiper-item>
<image
src="../../picture/traffic/banner-3.jpg"
mode=""
/>
</swiper-item>
</swiper>
</view>
<!-- 公司信息 -->
<view class="info">
<text>同城配送</text>
<text>行业龙头</text>
<text>半小时送达</text>
<text>100%好评</text>
</view>
<!-- 商品导航 -->
<view class="good-nav">
<view>
<image src="../../picture/images/cate-1.png" mode=""/>
<text>鲜花玫瑰</text>
</view>
<view>
<image src="../../picture/images/cate-1.png" mode=""/>
<text>鲜花玫瑰</text>
</view>
<view>
<image src="../../picture/images/cate-1.png" mode=""/>
<text>鲜花玫瑰</text>
</view>
<view>
<image src="../../picture/images/cate-1.png" mode=""/>
<text>鲜花玫瑰</text>
</view>
<view>
<image src="../../picture/images/cate-1.png" mode=""/>
<text>鲜花玫瑰</text>
</view>
</view>
<!-- 推荐商品 -->
<view class="good-hot"></view>
<!-- src:图片的资源地址-->
<!-- mode:图片的裁剪和缩放模式-->
<!-- show-menu-by-longpress:长安展示菜单-->
<!-- <image
src="../../picture/traffic/1.png"
mode="aspectFit"
show-menu-by-longpress
lazy-load
/> -->
<!-- user-select:长按以后选中文本
<text user-select space="nbsp">情 人节</text> -->
index.scss:
page{
height: 100vh;
background-color: #efefef !important;
// 四周也有间隔
padding: 16rpx;
box-sizing: border-box;
display: flex;
flex-direction: column;
// 与上一个的间隔
>view{
&:nth-child(n+2)
{
margin-top: 16rpx;
}
}
}
//轮播图区域的样式
.swiper{
border-radius: 10rpx;
overflow: hidden;
swiper{
height: 360rpx;
// background-color: skyblue;
swiper-item{
image{
width: 100%;
height: 100%;
border-radius: 10rpx;
}
//&在Sass中代表的是父选择器,引用的意思
//swiper-item:first-child
// &:first-child{
// background-color: lightsalmon;
// }
// &:first-child{
// background-color: lightseagreen;
// }
}
}
}
.info{
display:flex;
// 四个组件的布局方式
justify-content: space-between;
background-color: #fff;
padding: 20rpx 16rpx;
border-radius: 10rpx;
font-size: 24rpx;
}
// 商品导航区域
.good-nav{
display: flex;
justify-content: space-between;
background-color: #fff;
padding: 20rpx 16rpx;
border-radius: 10rpx;
view {
display: flex;
flex-direction: column;
align-items: center;
image{
width: 80rpx;
height: 80rpx;
}
text{
font-size: 24rpx;
margin-top: 12rpx;
}
};
}
注意:更改自己的图片文件路径