微信小程序实现美团酒店\淘宝推荐\京东推荐不规则卡片_微信小程序商品推荐卡片形式-CSDN博客

本文链接：https://blog.csdn.net/superherotht/article/details/122531802

这篇博客主要介绍了如何使用微信小程序实现类似美团酒店页面的推荐卡片效果。通过引入ICON并设置圆角和颜色，可以轻松创建卡片样式。内容包括基础的样式设计和卡片堆叠，如果要添加点赞等交互功能，需要自行扩展。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

美团更新的酒店页面推荐仿制。

美团界面如下

小程序界面如下二

代码直接放下面

tags直接引入ICON然后设置圆角和想要的颜色就能实现,这里不再仿制.

如需引入实际数据可以拉入缓存然后用循环实现卡片堆叠

此模仿只是最基础的样式和卡片设计，如果需要入点赞标签建议自己加一下。

<!--pages/card/card.wxml-->


<view class="cardcontainer">
    <view class="leftcardcontainer">
        <view class="card">
        <image src="https://tse2.mm.bing.net/th?id=OIP.zv3D73TAQK9q-g7L7TPkGwHaE6&pid=15.1" class="cardImg" mode="widthFix"/>
        <view class="cardText">
            <view class="cardTitle">藤原豆腐店</view>
            <view class="cardTags">点赞或火焰或其他</view>
            <view class="cardDetail">"{
  {detail}}"</view>
        </view>
        <view class="cardBtm">
            <view class="cardPrice">￥999
            <text>起</text>
            </view>
            <view class="cardSales">已售5000+</view>
        </view>
        </view>
        <view class="card">
        <image src="https://live.staticflickr.com/3103/2385867673_41b7dd81cd_n.jpg" class="cardImg" mode="widthFix"/>
        <view class="cardText">
            <view class="cardTitle">藤原豆腐店</view>
            <view class="cardTags">点赞或火焰或其他</view>
            <view class="cardDetail">"{
  {detail}}"</view>
        </view>
        <view class="cardBtm">
            <view class="cardPrice">￥999
            <text>起</text>
            </view>
            <view class="cardSales