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>