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

简介: 【微信小程序】车位在线销售平台(二)

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

文章目录


前言

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


一、底部导航栏

首先,我们实现底部导航栏的功能。

底部导航栏分为:首页、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>

效果如下:

四、秘籍

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

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


相关文章
预约按摩小程序开发,为什么很多上门按摩平台根本招聘不到优秀技师?
上门按摩平台面临招不到优秀技师的问题,主要原因是平台众多,技师选择多样。为解决此问题,平台可引入技师等级制度,根据订单数量和好评率划分高、低等级技师。高等级技师可享受70%-90%的高提成及首页推荐,这不仅能激励技师的积极性,还能帮助平台筛选出优质技师,提升服务质量和口碑,形成良性循环。
|
3月前
|
小程序 开发者
第一个微信小程序的初始化过程、小程序微信开发平台的下载、如何注册一个微信小程序的账号
这篇文章介绍了微信小程序的初始化过程,包括如何注册微信小程序账号、下载微信小程序开发者平台,并指导了新建小程序的详细步骤。
第一个微信小程序的初始化过程、小程序微信开发平台的下载、如何注册一个微信小程序的账号
|
4月前
|
小程序 前端开发 物联网
无人桌球室小程序平台系统定制开发方案
【项目摘要】随着社会进步和科技发展,无人桌球室小程序应运而生,解决传统桌球室管理难题。提供在线预订、自动计分、赛事查询及会员管理功能,采用微信小程序前端、微服务后端及物联网智能设备技术实现。市场推广结合社交媒体、线下活动及口碑营销。需开发支持,请联系小编。
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的新冠抗原自测平台小程序附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的新冠抗原自测平台小程序附带文章源码部署视频讲解等
33 2
|
4月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的童装购买平台微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的童装购买平台微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
|
4月前
|
小程序
美团买菜小程序平台开发:搭建便捷的线上买菜渠道
随着时代的发展和人们生活水平的提高,网上购物已经成为更多人的首选。在此背景下,类似美团买菜小程序平台开发应运而生,为消费者提供方便快捷的网上购物体验。下面我们将详细讲解美团买菜小程序平台开发的功能特点和优势。
|
4月前
|
小程序 安全 搜索推荐
陪玩交友互动小程序开发:打造有趣的社交互动平台
【陪玩交友小程序】融合趣味与实用,打造安全社交新平台。用户经实名认证后,可享在线匹配、语音聊天、游戏组队等多元互动。智能推荐系统助你高效找到玩伴,共享游戏攻略与娱乐资讯。个性化推荐服务,让每一次交流都充满乐趣,邀请好友共赴精彩社交之旅。
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的校园疫情防控管理平台小程序附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的校园疫情防控管理平台小程序附带文章源码部署视频讲解等
28 0
|
1月前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
518 7
|
1月前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
623 1

热门文章

最新文章