哈喽小伙伴们大家好,我是程序媛小李,今天,我们继续来开发微信小程序.
在这里,先贴上首页的效果图:
整个页面大概可以分为顶部的状态栏区域,轮播图区域,公司信息区域,商品导航区域,商品推荐区域,以及最下面的导航栏区域.
一,底部导航栏
在这里,我们遵循从外到内的原则,我们先来做最底部的导航区域
先来给大家看下整个小程序的项目目录:
每个文件及其作用在这里就不解释了
因为底部的导航栏这块肯定是全局配置,因此,我们打开app.js,在其中编写就可以
首先,创建几个页面:
"pages/category/category",
"pages/cart/cart",
"pages/home/home",
"pages/list/list"创建好之后,于pages同级新增一个tabbar属性
它是一个对象,包一个List数组,数组中同样也是对象,每个对象有四个属性,分别是内容,路径,图标以及激活的图标,
"tabBar": {
"list" :
[
{
"text" : "首页",
"pagePath" : "pages/index/index",
"iconPath": "/assets/index.png",
"selectedIconPath": "/assets/indexSelected.png"
},
{
"text":"分类",
"pagePath": "pages/category/category",
"iconPath": "/assets/category.png",
"selectedIconPath": "/assets/categorySelected.png"
},
{
"text":"购物车",
"pagePath": "pages/cart/cart",
"iconPath": "/assets/cart.png",
"selectedIconPath": "/assets/cartSelected.png"
},
{
"text":"我的",
"pagePath": "pages/home/home",
"iconPath": "/assets/home.png",
"selectedIconPath": "/assets/homeSelected.png"
}
]
},配置好之后打开预览工具即可查看效果
二,顶部状态栏
然后来看顶部的状态栏
这里因为每个页面对应的内容都不一样,所以我们直接在页面对应的文件中进行设置
找到每个页面对应的wxml文件
添加以下代码
<navigation-bar title="购物车" back="{{true}}" color="black" background="#f3514f"></navigation-bar>三,轮播图区域
使用swiper组件,
<view class="swiper">
<swiper
autoplay
circular
interval="2000"
indicator-dots
indicator-color="#fff"
indicator-active-color="#f3514f"
>
<swiper-item>
<image src="/assets/banner1.jpg"></image>
</swiper-item>
<swiper-item>
<image src="/assets/banner2.jpg"></image>
</swiper-item>
<swiper-item>
<image src="/assets/banner3.jpg"></image>
</swiper-item>
</swiper>
</view>样式控制:
.swiper {
height:360rpx;
background-color:skyblue;
border-radius: 20rpx;
}四,公司信息区域:
这里就是几个简单的text
<view class="message">
<text>同城配送</text>
<text>行业龙头</text>
<text>快速便捷</text>
<text>好评率高</text>
</view>五,商品导航区域
<view class="good-nav">
<view >
<navigator url="/pages/list/list">
<image src="/assets/good-nav.png"></image>
<text>辅导员说</text>
</navigator>
</view>
<view >
<navigator url="/pages/list/list">
<image src="/assets/good-nav.png"></image>
<text>辅导员说</text>
</navigator>
</view>
<view >
<navigator url="/pages/list/list">
<image src="/assets/good-nav.png"></image>
<text>辅导员说</text>
</navigator>
</view>
<view >
<navigator url="/pages/list/list">
<image src="/assets/good-nav.png"></image>
<text>辅导员说</text>
</navigator>
</view>
<view >
<navigator url="/pages/list/list">
<image src="/assets/good-nav.png"></image>
<text>辅导员说</text>
</navigator>
</view>
</view>样式控制
.good-nav {
display: flex;
justify-content: space-between;
view {
navigator {
display: flex;
flex-direction: column;
align-items: center;
background-color:beige;
border-radius: 10rpx;
margin-right: 20rpx;
}
padding-top: 40rpx;
width:200rpx;
height:200rpx;
border-radius: 10rpx;
image {
width:80rpx;
height:80rpx;
}
text {
font-size: 15rpx;
padding-top: 20rpx;
}
}
}六,商品推荐区域
<view class="recommend">
<scroll-view scroll-x class="scroll-x" >
<view>
<view class="good-item">
<image src="/assets/flower.png"></image>
<text>鲜花元素</text>
<text>66</text>
</view>
</view>
<view>
<view class="good-item">
<image src="/assets/flower.png"></image>
<text>鲜花元素</text>
<text>66</text>
</view>
</view>
<view>
<view class="good-item">
<image src="/assets/flower.png"></image>
<text>鲜花元素</text>
<text>66</text>
</view>
</view>
<view>
<view class="good-item">
<image src="/assets/flower.png"></image>
<text>鲜花元素</text>
<text>66</text>
</view>
</view>
<view>
<view class="good-item">
<image src="/assets/flower.png"></image>
<text>鲜花元素</text>
<text>66</text>
</view>
</view>
</scroll-view>样式控制
.recommend {
border-radius: 10rpx;
background-color: wheat;
font-size:24rpx;
.scroll-x {
width:100%;
white-space: nowrap;
view {
display: inline-block;
width:320rpx;
height:400rpx;
margin-right: 16rpx;
.good-item {
display: flex;
flex-direction: column;
justify-content: space-between;
text {
&:nth-of-type(1) {
font-weight: bold;
}
}
}
image {
width:100%;
height:320rpx;
}
}
}
}好啦,以上就是首页的全部内容,下期见!
