微信小程序实现美团酒店\淘宝推荐\京东推荐不规则卡片

唐英雄

已于 2022-01-18 21:32:40 修改

阅读量1k

点赞数

文章标签：小程序 css html javascript

于 2022-01-17 00:39:24 首次发布

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

版权

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

美团界面如下

小程序界面如下二

代码直接放下面

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