1、实现效果
手机效果预览，这里的首页使用到了轮播图。页面图片数据可以替换成自己的数据。
2、开发者工具效果图
3、项目的目录结构
4、首页核心代码
4.1 index.js
这里用来存放数据，页面的数据。目前是假数据，也可以调用接口接收真实数据
// index.js
import { request } from '../../request/index'
Page({
data: {
//轮播图数组
swiperList: [
{
id: 0,
name: "https://img.alicdn.com/imgextra/i3/O1CN01Sf6dER1zbJ3uVQ0lE_!!6000000006732-0-tps-846-472.jpg",
navigator_url: "/pages/goods_detail/index?goods_id=1"
},
{
id: 1,
name: "https://gw.alicdn.com/imgextra/i4/O1CN01a71ilU1T2RCTvUXDY_!!6000000002324-0-tps-846-472.jpg",
navigator_url: "/pages/goods_detail/index?goods_id=2"
}, {
id: 2,
name: "https://img.alicdn.com/imgextra/i2/O1CN01XZC8Dd1IUs179sweg_!!6000000000897-2-tps-846-472.png",
navigator_url: "/pages/goods_detail/index?goods_id=0"
}
],
//导航栏数组
CateList: [
{
id: 0,
name: "分类",
image_src: "https://gw.alicdn.com/tfs/TB1WgOmesieb18jSZFvXXaI3FXa-183-144.png_q90.jpg_.webp?getAvatar=1"
},
{
id: 1,
name: "秒杀拍",
image_src: "https://gw.alicdn.com/imgextra/i2/O1CN01ZOR1cv1yjGFORGh1V_!!6000000006614-2-tps-183-144.png_q90.jpg_.webp"
},
{
id: 2,
name: "超市购",
image_src: "https://gw.alicdn.com/imgextra/i1/O1CN01iZIGkz1URSOUdRHqS_!!6000000002514-2-tps-183-144.png_q90.jpg_.webp"
},
{
id: 3,
name: "母婴品",
image_src: "https://gw.alicdn.com/imgextra/i4/O1CN01XCiY1B1px9ivHkDGm_!!6000000005426-2-tps-183-144.png_q90.jpg_.webp"
},
],
//楼层数组
FloorList: [
{
id: 0,
name: "时尚女装",
image_src: "",
product_list: [
{
id: 0,
name: "优质服饰",
image_src: "https://gw.alicdn.com/bao/uploaded/i1/2208236021609/O1CN01DLYP6c1Nky6nD9aC5_!!2208236021609.jpg_300x300q90.jpg_.webp",
},
{
id: 1,
name: "优质服饰",
image_src: "https://img.alicdn.com/imgextra/i3/1091712316/O1CN01SMxNDz1Sym8OPi9T4_!!1091712316.jpg",
},
{
id: 2,
name: "优质服饰",
image_src: "https://gw.alicdn.com/bao/uploaded/i2/2208175348975/O1CN01SLmyfQ2GAbWEbpOTM_!!2208175348975.jpg_300x300q90.jpg_.webp",
},
{
id: 3,
name: "优质服饰",
image_src: "https://img.alicdn.com/imgextra/i4/3058655500/O1CN01MgaswB1qV3D8RiENd_!!3058655500.jpg",
},
{
id: 4,
name: "优质服饰",
image_src: "https://gw.alicdn.com/bao/uploaded/i1/2201235902250/O1CN01GLrvxY1SUXzJwEd7O_!!0-item_pic.jpg_300x300q90.jpg_.webp",
}
]
},
{
id: 1,
name: "时尚男装",
image_src: "",
product_list: [
{
id: 0,
name: "优质服饰",
image_src: "https://img.alicdn.com/imgextra/i1/1093544511/O1CN017a1nJ01jC5P4QiIgz_!!1093544511.jpg",
},
{
id: 1,
name: "优质服饰",
image_src: "https://gw.alicdn.com/bao/uploaded///asearch.alicdn.com/bao/uploaded/O1CN01mrx8Cz1xQeiSkAXRG_!!3656526438.jpg_300x300q90.jpg_.webp",
},
{
id: 2,
name: "优质服饰",
image_src: "https://img.alicdn.com/imgextra/i3/1646032534/O1CN01NyzUbM1UacSALB0cb_!!1646032534.jpg",
},
{
id: 3,
name: "优质服饰",
image_src: "https://gw.alicdn.com/bao/uploaded/i1/97015806/O1CN01leYCHh1slCPHIKqzV_!!0-saturn_solar.jpg_300x300q90.jpg_.webp",
},
{
id: 4,
name: "优质服饰",
image_src: "https://img.alicdn.com/imgextra/i1/1646032534/O1CN01AEmh1a1UacSFyZ12W_!!1646032534.jpg",
}
]
},
{
id: 2,
name: "时尚儿童装",
image_src: "",
product_list: [
{
id: 0,
name: "优质服饰",
image_src: "https://img.alicdn.com/imgextra/i2/3862752450/O1CN01HvjRZK1Ty9CVnJh9K_!!3862752450.jpg",
},
{
id: 1,
name: "优质服饰",
image_src: "https://img.alicdn.com/imgextra/i3/3862752450/O1CN01OnmqV11Ty9CYf5IjF_!!3862752450.jpg",
},
{
id: 2,
name: "优质服饰",
image_src: "https://gw.alicdn.com/imgextra/i4/1710394567/O1CN01mBkcxl1jbjdmcOkZ5_!!1710394567.jpg_110x10000Q75.jpg_.webp",
},
{
id: 3,
name: "优质服饰",
image_src: "https://img.alicdn.com/imgextra/i1/2336264327/O1CN01bBny6N1hpobvL5Up0_!!2336264327.jpg",
},
{
id: 4,
name: "优质服饰",
image_src: "https://img.alicdn.com/imgextra/i2/2268125690/O1CN01K81koK1ru4SZhsQd9_!!2268125690.jpg",
}
]
},
]
},
//页面开始加载 就会触发
onload: function (options) {
},
})
4.2 index.json
这里调用到了搜索框的组件，博客下方给出搜索框的相关代码
{
"usingComponents": {
"SearchInput": "../../components/SearchInput/SearchInput"
},
"navigationBarTitleText": "商品首页"
}
4.3 index.wxml
<!-- index.wxml -->
<view class="pyg_index">
<!-- 搜索框 开始 -->
<SearchInput></SearchInput>
<!-- 搜索框 结束 -->
<!-- 轮播图 开始 -->
<view class="index_swiper">
<swiper autoplay indicator-dots circular>
<swiper-item wx:for="{
{swiperList}}" wx:key="id">
<navigator>
<image mode="widthFix" src="{
{item.name}}"></image>
</navigator>
</swiper-item>
</swiper>
</view>
<!-- 轮播图 结束 -->
<!-- 导航 开始 -->
<view class="index_cate">
<navigator open-type="switchTab" wx:for="{
{CateList}}" wx:key="id">
<image mode="widthFix" src="{
{item.image_src}}" />
<text>{
{item.name}}</text>
</navigator>
</view>
<!-- 导航 结束 -->
<!-- 楼层 开始 -->
<view class="index_floor">
<view class="floor_group" wx:for="{
{FloorList}}" wx:for-item="item1" wx:for-index="index1" wx:key="id">
<!-- 标题 -->
<view class="floor_title">{
{item1.name}}</view>
<!-- 内容 -->
<view class="floor_list">
<navigator wx:for="{
{item1.product_list}}" wx:for-item="item2" wx:for-index="index2" wx:key="id">
<image mode="{
{index2 ===0 ? 'heightFix':'scaleToFill'}}" src="{
{item2.image_src}}" />
</navigator>
</view>
</view>
</view>
<!-- 楼层 结束 -->
</view>
4.4 index.wxss
/**index.wxss**/
.index_swiper swiper {
width: 100%;
height: calc(100vm*352/1152);
}
.index_swiper image {
width: 100%;
}
.index_cate {
display: flex;
}
.index_cate navigator {
padding: 20rpx;
flex: 1;
text-align: center;
}
.index_cate navigator image {
width: 100%;
}
.index_floor .floor_group .floor_title {
font-size: 34rpx;
padding: 10rpx 0;
}
.index_floor .floor_group .floor_title image {
width: 100%;
}
.index_floor .floor_group .floor_list {
overflow: hidden;
}
.index_floor .floor_group .floor_list navigator {
float: left;
width: 33.33%;
/* 后四个超链接 */
/* 四 五 两个超链接 */
}
.index_floor .floor_group .floor_list navigator:nth-last-child(-n+4) {
/*
原图的宽高 225 * 300
225 / 300 = 33.33vm / height
第一张图片高度 height:33.33 vm * 300 / 225
*/
height: 120px;
border-left: 10rpx solid #fff;
}
.index_floor .floor_group .floor_list navigator:nth-child(4),
.index_floor .floor_group .floor_list navigator:nth-child(5) {
border-top: 5rpx solid #fff;
}
.index_floor .floor_group .floor_list navigator image {
width: 100%;
}
5、配置tabBar效果
app.json文件中
{
"pages": [
"pages/index/index",
"pages/category/index",
"pages/cart/index",
"pages/user/index"
],
"requiredPrivateInfos": [
"choosePoi",
"chooseAddress"
],
"permission": {
"scope.userLocation": {
"desc": "你的位置信息将用来进行接口调试"
}
},
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#eb4450",
"navigationBarTitleText": "小郑优购",
"navigationBarTextStyle": "white"
},
"sitemapLocation": "sitemap.json",
"tabBar": {
"color": "#999",
"selectedColor": "#ff2d4a",
"backgroundColor": "#fafafa",
"position": "bottom",
"borderStyle": "black",
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "icons/home.png",
"selectedIconPath": "icons/home_after.png"
},
{
"pagePath": "pages/category/index",
"text": "分类",
"iconPath": "icons/cateory.png",
"selectedIconPath": "icons/category_after.png"
},
{
"pagePath": "pages/cart/index",
"text": "购物车",
"iconPath": "icons/cart.png",
"selectedIconPath": "icons/cart_after.png"
},
{
"pagePath": "pages/user/index",
"text": "我的",
"iconPath": "icons/info.png",
"selectedIconPath": "icons/info_after.png"
}
]
}
}
6、搜索框组件
这里的js和json文件没用到，默认代码就行。如果不知道组件怎样创建，可以搜索以下，很容易实现。给出主要的布局和样式
6.1 SearchInput.wxml
<!--components/SearchInput/SearchInput.wxml-->
<view class="search_input">
<navigator url="/pages/search/index" open-type="navigate">
搜索
</navigator>
</view>
6.2 SearchInput.wxss
/* components/SearchInput/SearchInput.wxss */
.search_input {
height: 90rpx;
padding: 10rpx;
background-color: var(--themeColor);
}
.search_input navigator {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: #fff;
border-radius: 15rpx;
color: #666;
}
