2023微信小程序期末大作业-精品租房小程序(附下载链接)

2023微信小程序期末大作业-精品租房小程序(导入即可使用)

程序代码比较简单,含底部导航栏,搜索框,轮播图,动态滚动文字等等,所有资源都在项目内,没有引用在线资源或者接口,直接打开即可使用,代码有注释,轻松实现二次开发

点我下载项目源码

程序截图如下所示:
请添加图片描述

请添加图片描述
请添加图片描述

请添加图片描述

请添加图片描述

部分代码展示:

<!-- 首页内容 -->
<view class="cu-bar bg-white solid-bottom">
  <view class='action'>
    <text class='cuIcon-titles text-orange '></text> 精选房源
  </view>
</view>
<view class="cu-card case no-card">
  <view class="cu-item shadow">
    <view class="image">
    <navigator url="../../pages/detail/detail">
      <image src="../../image/house1.png" mode="widthFix"></image>
      <!-- 第一张房间图片 -->
   </navigator>
      <view class="cu-tag bg-green light">1200</view>
      <view class="cu-bar bg-shadeBottom">
        <text class="text-cut">出售中.......</text>
      </view>
    </view>
    <view class="cu-list menu-avatar">
      <view class="cu-item">
        <view class="cu-avatar round lg" style="background-image:url(../../image/people1.png);"></view><!-- 第一张房间图片的头像 -->
        <view class="content flex-sub">
          <view class="text-grey">
          <view class='right-tags'>编程ID</view>
          </view>
          <view class="text-gray text-sm flex justify-between">
            2023/10/29 18:42
            <view class="text-gray text-sm">
              <text class="cuIcon-attentionfill margin-lr-xs"></text>99+
              <text class="cuIcon-appreciatefill margin-lr-xs"></text> 20
              <text class="cuIcon-messagefill margin-lr-xs"></text> 30
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</view>




 <!-- 第二张 -->
<view class="cu-card case no-card">
  <view class="cu-item shadow">
    <view class="image">
    <navigator url="../../pages/detail/detail">
      <image src="../../image/house2.png" mode="widthFix"></image>
      <!-- 第二张图片 -->
      </navigator>
      <view class="cu-tag bg-blue">1200</view>
      <view class="cu-bar bg-shadeBottom">
        <text class="text-cut">已出售</text>
      </view>
    </view>
    <view class="cu-list menu-avatar">
      <view class="cu-item">
        <view class="cu-avatar round lg" style="background-image:url(../../image/people2.png);"></view>
        <view class="content flex-sub">
          <view class="text-grey">甲乙丙</view>
          <view class="text-gray text-sm flex justify-between">
             2023/11/29 18:42
            <view class="text-gray text-sm">
              <text class="cuIcon-attentionfill margin-lr-xs"></text> 10
              <text class="cuIcon-appreciatefill margin-lr-xs"></text> 20
              <text class="cuIcon-messagefill margin-lr-xs"></text> 30
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</view>



<view class="cu-card case no-card">
  <view class="cu-item shadow">
    <view class="image">
      <image src="../../image/house3.png" mode="widthFix"></image>
      <!-- 第三张图片 -->
      <view class="cu-tag bg-blue light">1000</view>
      <view class="cu-bar bg-shadeBottom">
        <text class="text-cut">出售中.......</text>
      </view>
    </view>
    <view class="cu-list menu-avatar">
      <view class="cu-item">
        <view class="cu-avatar round lg" style="background-image:url(../../image/people3.png);"></view>
        <view class="content flex-sub">
          <view class="text-grey">	大侠大虾</view>
          <view class="text-gray text-sm flex justify-between">
             2023/5/29 18:42
            <view class="text-gray text-sm">
              <text class="cuIcon-attentionfill margin-lr-xs"></text> 10
              <text class="cuIcon-appreciatefill margin-lr-xs"></text> 20
              <text class="cuIcon-messagefill margin-lr-xs"></text> 30
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</view>



<view class="cu-card case no-card">
  <view class="cu-item shadow">
    <view class="image">
      <image src="../../image/house5.png" mode="widthFix"></image>
      <view class="cu-tag bg-blue">2300</view>
      <view class="cu-bar bg-shadeBottom">
        <text class="text-cut">建设中.......</text>
      </view>
    </view>
    <view class="cu-list menu-avatar">
      <view class="cu-item">
        <view class="cu-avatar round lg" style="background-image:url(../../image/people3.png);"></view>
        <view class="content flex-sub">
          <view class="text-grey">	大侠大虾</view>
          <view class="text-gray text-sm flex justify-between">
             2023/9/29 18:42
            <view class="text-gray text-sm">
              <text class="cuIcon-attentionfill margin-lr-xs"></text> 10
              <text class="cuIcon-appreciatefill margin-lr-xs"></text> 20
              <text class="cuIcon-messagefill margin-lr-xs"></text> 30
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</view>

https://download.csdn.net/download/weixin_43474701/88627310

猜你喜欢

转载自blog.csdn.net/weixin_43474701/article/details/134981025