1、实现效果
手机效果预览，这里的首页使用到了轮播图。页面图片数据可以替换成自己的数据。
2、开发者工具效果图
3、项目的目录结构
4、首页核心代码
4.1 index.js
这里用来存放数据，页面的数据。目前是假数据，也可以调用接口接收真实数据
// index.jsimport { 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;}
