【微信小程序】车位在线销售平台（二）
文章目录
前言
在前面的章节中我们已经做好了开发的一切准备，在此篇中我们将对首页进行开发。
一、底部导航栏
首先，我们实现底部导航栏的功能。
底部导航栏分为：首页、3D全景、我的 三大界面
寻找相应的图标（选中和未选中两种颜色）
这里我将它们导入到了对应的文件夹中（icons）
然后我们新建三大界面：home、three_D、user
最后在app.json文件中加入"tabBar"
"tabBar": { "color": "#aaaaaa", "selectedColor": "#e54d42", "list": [{ "pagePath": "pages/home/home", "text": "首页", "iconPath": "/icons/home_0.png", "selectedIconPath": "/icons/home_1.png" }, { "pagePath": "pages/three_D/three_D", "text": "3D全景", "iconPath": "/icons/threeD_0.png", "selectedIconPath": "/icons/threeD_1.png" }, { "pagePath": "pages/user/user", "text": "我的", "iconPath": "/icons/user_0.png", "selectedIconPath": "/icons/user_1.png" } ] },
保存刷新后，底部可以看到新出现的底部导航栏
二、顶部搜索栏和轮播图
home.xml
<!-- 搜索栏 --> <van-search value="{{ value }}" placeholder="请输入搜索关键词" /> <!-- 轮播图 --> <view> <swiper class="swiper" autoplay="true" indicator-dots="true"> <swiper-item wx:for="{{image}}"> <image src="{{item}}"></image> </swiper-item> </swiper> </view>
home.js
data: { image:[ 'https://z3.ax1x.com/2021/08/20/fLeHBR.jpg', 'https://z3.ax1x.com/2021/08/20/fLm9ud.jpg', 'https://z3.ax1x.com/2021/08/20/fLmZ8S.jpg', ], },
在home.xml中我们调用vant ui组件库，在home.js中我们将要展示的轮播图以网址的形式保存到image列表中，最后令swiper-item遍历该列表。保存刷新后，效果如下：
三、入住房产
入住房产由顶部滑动栏和栏内信息两部分组成
调用组件van-tabs
<!-- 入驻房产 --> <view class="main"> <text style="font-weight:500;font-size:30rpx;margin-left:25rpx;margin-top:10rpx">入驻房产</text> <!-- 房产滑动栏 --> <van-tabs animated custom-class="home-custom" nav-class="home-nav" tab-class="home-tab" title-active-color="red"> <van-tab title="全部楼盘"></van-tab> <van-tab title="待开盘"></van-tab> <van-tab title="已开盘"></van-tab> <van-tab title="已封盘"></van-tab> </van-tabs> </view>
效果如下：
接着我们加入滑动栏的内容。为了方便，这里我们就直接将内容加到各个van-table标签中。新建一个卡片框架，充当一个房产的信息卡片，同时卡片内部分为图片、标题和标价三大信息。代码结构如下：
<!-- 卡片框架 --> <view class="card-left"> <!-- 内部图片 --> <view class="card-img"> </view> <!-- 内部标题 --> <view class="card-title"> </view> <!-- 内部标价 --> <view class="card-money"> </view> </view>
效果如下：
四、秘籍
秘籍以悬浮按钮的形式固定在手机右侧。点击秘籍可以跳转到车位秘籍列表，用户可以在其中了解车位的一些常识。这里我们仅作展示，效果如下：
至此，首页的界面已经开发完毕。其中涉及到的交互和其他代码，这里就不做阐述😊😊😊
