【微信小程序】车位在线销售平台（二）

【微信小程序】车位在线销售平台（二）

---

前言

在前面的章节中我们已经做好了开发的一切准备，在此篇中我们将对首页进行开发。

---

一、底部导航栏

首先，我们实现底部导航栏的功能。
底部导航栏分为：首页、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>

效果如下：

四、秘籍

秘籍以悬浮按钮的形式固定在手机右侧。点击秘籍可以跳转到车位秘籍列表，用户可以在其中了解车位的一些常识。这里我们仅作展示，效果如下：

至此，首页的界面已经开发完毕。其中涉及到的交互和其他代码，这里就不做阐述😊😊😊