微信小程序快速布局--商品列表左右布局

Myth丶恋晨 2022-12-22 12:28 394阅读 0赞

##### 效果图 #####

![在这里插入图片描述][20201120141647220.png_pic_center]

*  标题处做了限制两行
 *  商品图片高度自适应.不需要就把mode去掉

##### wxml #####

<view class="item">
        <image class="item_img" mode="widthFix" src="../../../images/a10.png"></image>
        <view class="item_right">
          <view class="item_name">商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称</view>
          <view class="item_bottom">
            <text class="item_coin">200积分</text>
            <text class="item_btn">立即兑换</text>
          </view>
        </view>
      </view>

##### wxss #####

/* item */
    .item {
      box-sizing: border-box;
      background: #fff;
      width: 100%;
      padding: 10rpx 20rpx;
      margin: 20rpx 0;
    
      display: flex;
    }
    
    .item_img {
      width: 30%;
    }
    
    .item_right {
      flex: 1;
      padding-left: 20rpx;
    
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    
    .item_name {
      /* line-clamp: 2;
      text-overflow: ellipsis; */
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }
    
    .item_bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .item_coin {
      color: red;
      font-size: 24rpx;
    }
    
    .item_btn {
      background-color: #000;
      color: #fff;
      border-radius: 20rpx;
      padding: 10rpx;
      font-size: 24rpx;
    }
    
    /* end */

[20201120141647220.png_pic_center]: /images/20221120/cbd2e4cd0013450b951c926ab23dadf8.png

发表评论取消回复

表情：

评论列表（有 0 条评论，394人围观）

还没有评论，来说两句吧...

相关阅读

相关微信小程序——flex布局

在一款校园类软件新引进日课表功能，其中的单个盒子就可使用flex布局具体的盒子分布方式可如上划分（其中建筑的方格可最后考虑，因为此图片位于文字的下方，需要用其他定位方式来...

爱被打了一巴掌/ 2024年04月24日 14:42/ 0 赞/ 126 阅读

相关微信小程序实现点击下拉展示左右布局

效果图： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9...

「爱情、让人受尽委屈。」/ 2024年04月17日 17:41/ 0 赞/ 91 阅读

相关微信小程序（六）表格布局

小程序中表格布局和android开发中的gridview控件布局不一样，小程序中不是定义一个表格控件，而是通过flex布局自动换行的方式来达到目的。首先在wxml布局文件

偏执的太偏执、/ 2023年02月25日 12:22/ 0 赞/ 48 阅读

相关微信小程序（九）布局

1、display:block 指定为块内容器模式，总是使用新行开始显示，微信小程序的视图容器(view,scroll-view和swiper)默认都是dispaly:bloc

曾经终败给现在/ 2022年12月27日 01:58/ 0 赞/ 191 阅读

相关微信小程序快速布局--商品列表左右布局

效果图 ![在这里插入图片描述][20201120141647220.png_pic_center] 标题处做了限制两行商品图片高度自适应.不需要就把mo

Myth丶恋晨/ 2022年12月22日 12:28/ 0 赞/ 395 阅读

相关微信小程序开发:Flex布局

转载自：微信小程序页面布局方式采用的是`Flex`布局。 `Flex`布局，是W3c在2009年提出的一种新的方案，可以简便，完整，响应式的实现各种页面布局。 Fl

亦凉/ 2022年07月12日 14:28/ 0 赞/ 313 阅读

相关微信小程序电商实战-商品列表流式布局

IT实战联盟博客：[http://blog.100boot.cn][http_blog.100boot.cn] 今天给大家分享一下微信小程序中商品列表的流式布局

傷城~/ 2022年06月01日 10:18/ 0 赞/ 910 阅读

相关微信小程序---左右滑动（图片列表）

index.wxml: <view class="scroll_box" > <scroll-view class="scroll-view_

谁借莪１个温暖的怀抱￠/ 2022年03月09日 16:26/ 0 赞/ 520 阅读

相关微信小程序之view布局

.wxml ![Image 1][] .wxss ![Image 1][] 几个不同效果是view的属性不同产生的 ![Image 1][] ![Ima

怼烎@/ 2021年09月18日 03:02/ 0 赞/ 543 阅读

相关微信小程序页面布局

一,微信小程序页面布局方式采用的是Flex布局 1.Flex布局，是W3c在2009年提出的一种新的方案，可以简便，完整，响应式的实现各种页面布局。 2.Flex布局提

野性酷女/ 2021年06月11日 15:11/ 0 赞/ 843 阅读